1

我想在单击相同数据的位置时突出显示所有行，例如。单击 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>
4

3 回答 3

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

于 2012-06-30T14:00:26.817 回答
0

我有这样的事情：

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

于 2012-06-30T14:22:25.027 回答
-1

现在试试。http://jsfiddle.net/DamianS1987/G2trb/

于 2012-06-30T15:26:04.030 回答