Question

我想在点击时突出显示所有行，例如相同的数据。点击1b时 - ＆gt;突出显示行：2和4.当Bev点击时 - ＆gt;突出显示行：3和4

再次点击 - ＆gt;行突出显示消失。

顺便说一句。请注意，悬停效果也适用于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;}
  </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>

Answer 1

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

Answer 2

我有这样的事情：

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

Answer 3

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

单击时，突出显示表中的所有行，其中所有行都具有相同的数据

3 个答案: