单击时突出显示表中所有具有相同数据的行答案

【问题标题】：Highlight all rows in table when clicked where all have same data单击时突出显示表中所有具有相同数据的行
【发布时间】：2012-06-30 23:26:04
【问题描述】：

我想在单击相同数据的位置时突出显示所有行，例如。单击 1b 时 -> 突出显示行：2 和 4。单击 Bev 时 -> 突出显示行：3 和 4

再次点击 -> 行高亮消失。

顺便说一句。请注意，悬停效果也适用于行跨度。

<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>

【问题讨论】：

会不会是这样，如果任何文本匹配，那么这些行会被突出显示？

标签： javascript row highlight click

【解决方案1】：

我有这样的事情：

http://jsfiddle.net/DamianS1987/G2trb/

【讨论】：

几乎不错，但单击 Bev 顺便说一句，行跨度没有突出显示。你的名字听起来很熟悉。你会说波兰语吗？
杰克 najbardziej 卡罗尔 :)。但我认为在这个论坛是不允许的。稍等，我会努力解决的……
所以我知道高亮应该省略行跨度，对吧？

【解决方案2】：

<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>

已测试：http://jsfiddle.net/4vLTP/

【讨论】：

不完全是。它突出显示而不是

【解决方案3】：

立即尝试。 http://jsfiddle.net/DamianS1987/G2trb/

【讨论】：

没有区别。两个脚本是一样的。