1. 首頁
  2. 問答
  3. 突出顯示錶中所有行在單擊時所有具有相同數據的行

突出顯示錶中所有行在單擊時所有具有相同數據的行

2012-06-30 22 views
1

我想突出顯示單擊時所有行，例如相同的數據。當1b點擊 - >突出顯示行：2和4.當Bev點擊 - >突出顯示行：3和4突出顯示錶中所有行在單擊時所有具有相同數據的行

再次點擊 - >行突出顯示消失。

btw。請注意，懸停效果在跨行時也適用。

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

來源

2012-06-30 Biały Karol

+0

會是這樣的，如果任何文本匹配，那麼這些行將突出顯示？ – Subhajit

+0

@Subhajit我認爲是的 –

回答

0

我有這樣的事情：

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

來源

2012-06-30 14:22:25 DamianS1987

+0

幾乎不錯，但是單擊時不突出顯示行跨越是Bev btw。你的名字聽起來很熟。你會說波蘭語嗎？ –

+0

Jak najbardziej Karol :)。但我認爲這是不允許在這個論壇上。堅持一秒鐘，我會盡力解決它... – DamianS1987

+0

所以我明白，rowspan應該被高亮省略，對吧？ – DamianS1987

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-30 14:00:26 mechdeveloper

+0

不完全。它突出顯示​​而不是 –

相關問題

 相關問題