Javascript 单击表中所有数据相同的行时，高亮显示表中的所有行
我想在单击时高亮显示所有行，其中有相同的数据，例如单击时->高亮显示行：2和4。单击Bev时->突出显示行：3和4 再次单击->行高亮显示消失 顺便说一句，请注意，悬停效果也适用于rowspanJavascript 单击表中所有数据相同的行时，高亮显示表中的所有行,javascript,row,highlight,click,Javascript,Row,Highlight,Click,我想在单击时高亮显示所有行，其中有相同的数据，例如单击时->高亮显示行：2和4。单击Bev时->突出显示行：3和4 再次单击->行高亮显示消失 顺便说一句，请注意，悬停效果也适用于rowspan <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <style type="text/css"> table {border
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
table {border-collapse:collapse; border: 1px solid black;}
td {padding: 5px; border: 1px solid black;}
tr:hover, .hover {background: #eee;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var maximumCells = 0;
var amountOfCells = 0;
var foundCells;
$("tr").each(function() {
foundCells = $(this).find("td");
amountOfCells = foundCells.length;
if (amountOfCells > maximumCells) maximumCells = amountOfCells;
});
$("td").hover(function() {
$el = $(this);
if ($el.siblings("td").length < (maximumCells-1)) {
$el.parent().prev().find("td[rowspan]").addClass("hover");
}
}, function() {
$el.parent().prev().find("td[rowspan]").removeClass("hover");
});
});
</script>
</head>
<body>
<table>
<tr>
<th>lesson</th>
<th>class</th>
<th>absent</th>
<th>substitute</th>
</tr>
<tr>
<td>1</td>
<td>---</td>
<td>---</td>
<td>---</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>1b</td>
<td>John</td>
<td>Max</td>
</tr>
<tr>
<td>3a</td>
<td>Bev</td>
<td>Abbi</td>
</tr>
<tr>
<td>3</td>
<td>1b</td>
<td>Bev</td>
<td>Robbie</td>
</tr>
</table>
</body>
</html>
表{边框折叠：折叠；边框：1px纯黑色；}
td{填充：5px；边框：1px纯黑色；}
tr:hover，.hover{背景：#eee；}
$（函数（）{
var maximumCells=0；
var amountOfCells=0；
var细胞；
$（“tr”）。每个（函数（）{
foundCells=$（this.find（“td”）；
amountOfCells=foundCells.length；
如果（amountOfCells>maximumCells）maximumCells=amountOfCells；
});
$（“td”）.hover（函数（）{
$el=$（此项）；
if（$el.同胞（“td”）.长度<（最大单元数-1））{
$el.parent（）.prev（）.find（“td[rowspan]”）addClass（“hover”）；
}
}，函数（）{
$el.parent（）.prev（）.find（“td[rowspan]”）.removeClass（“hover”）；
});
});
课程
班
缺席的
代替
1.
---
---
---
2.
1b
约翰
马克斯
3a
贝弗
阿比
3.
1b
贝弗
罗比
表{边框折叠：折叠；边框：1px纯黑色；}
td{填充：5px；边框：1px纯黑色；}
tr:hover，.hover{背景：#eee；}
.黄色的{
背景颜色：黄色；
}
$（函数（）{
var maximumCells=0；
var amountOfCells=0；
var细胞；
$（“tr”）。每个（函数（）{
foundCells=$（this.find（“td”）；
amountOfCells=foundCells.length；
如果（amountOfCells>maximumCells）maximumCells=amountOfCells；
});
$（“td”）.hover（函数（）{
$el=$（此项）；
if（$el.同胞（“td”）.长度<（最大单元数-1））{
$el.parent（）.prev（）.find（“td[rowspan]”）addClass（“hover”）；
}
}，函数（）{
$el.parent（）.prev（）.find（“td[rowspan]”）.removeClass（“hover”）；
});
});
$（“td”）。单击（函数（）{
单击元素=$（此项）；
$（“tr”）。每个（函数（）{
tr=$（本）；
$（this.find（“td”）.each（function（）{
if（！$（this.hasClass（“黄色”）和&$（this.html（）==$（clickedElement.html（））{
$（this.addClass（“黄色”）；}
else if（$（this）.hasClass（“黄色”）和&$（this.html（）==$（clickedElement.html（））{
$（this.removeClass（“黄色”）；}
});
});
});
课程
班
缺席的
代替
1.
---
---
---
2.
1b
约翰
马克斯
3a
贝弗
阿比
3.
1b
贝弗
罗比
测试：我有这样的东西：
现在就试试 如果有任何文本匹配，那么这些行会高亮显示吗？几乎不错，但单击Bev btw时rowspan不会高亮显示。您的名字听起来很熟悉。你会说波兰语吗。但我认为，这是不允许在这个论坛。等一下，我会设法解决它…所以我知道行跨度应该被突出显示忽略，对吗？不完全是这样。它亮了，而不是没有区别。两个脚本都是相同的。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
table {border-collapse:collapse; border: 1px solid black;}
td {padding: 5px; border: 1px solid black;}
tr:hover, .hover {background: #eee;}
.yellow{
background-color:yellow;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var maximumCells = 0;
var amountOfCells = 0;
var foundCells;
$("tr").each(function() {
foundCells = $(this).find("td");
amountOfCells = foundCells.length;
if (amountOfCells > maximumCells) maximumCells = amountOfCells;
});
$("td").hover(function() {
$el = $(this);
if ($el.siblings("td").length < (maximumCells-1)) {
$el.parent().prev().find("td[rowspan]").addClass("hover");
}
}, function() {
$el.parent().prev().find("td[rowspan]").removeClass("hover");
});
});
$("td").click(function(){
clickedElement = $(this);
$("tr").each(function() {
tr = $(this);
$(this).find("td").each(function() {
if(!$(this).hasClass("yellow") && $(this).html()==$(clickedElement).html()){
$(this).addClass("yellow");}
else if($(this).hasClass("yellow") && $(this).html()==$(clickedElement).html()){
$(this).removeClass("yellow");}
});
});
});
</script>
</head>
<body>
<table>
<tr>
<th>lesson</th>
<th>class</th>
<th>absent</th>
<th>substitute</th>
</tr>
<tr>
<td>1</td>
<td>---</td>
<td>---</td>
<td>---</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>1b</td>
<td>John</td>
<td>Max</td>
</tr>
<tr>
<td>3a</td>
<td>Bev</td>
<td>Abbi</td>
</tr>
<tr>
<td>3</td>
<td>1b</td>
<td>Bev</td>
<td>Robbie</td>
</tr>
</table>
</body>
</html>