1

クリックしたときにすべての行を強調表示したいのですが、どこに同じデータがありますか。1b がクリックされた場合 -> 行を強調表示: 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-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 に答える