突出显示div中两个表中的行和列(highlight rows and columns within two tables in a div)

突出显示div中两个表中的行和列(highlight rows and columns within two tables in a div)

我在div中有2个表，我想同时在两个表上突出显示相同的行。 现在我只设法让它突出显示1个表中的列和行。

（例如：如果我将鼠标悬停在tbl-2 “Row2 Column3”上，则应突出显示tbl-1 Row2，反之亦然）

另外我如何才能突出显示th标签呢？

<div class="row"> <div class="span2 pull-left"> <table class="table table-bordered pull-left" id="compare-tbl-1"> <thead> <th>Column 1</th> </thead> <tbody> <tr> <td> Row1 </td> </tr> <tr> <td> Row2 </td> </tr> <tr> <td> Row3 </td> </tr> <tr> <td> Row4 </td> </tr> <tr> <td> Row5 </td> </tr> </tbody> </table> </div> <div class="span10 pull-right"> <table class="table table-bordered" id="compare-tbl-2"> <thead> <th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th> </thead> <tbody> <tr> <td>Row1 Column1</td><td>Row1 Column2</td><td>Row1 Column3</td><td>Row1 Column4</td><td>Row1 Column5</td> </tr> <tr> <td>Row2 Column1</td><td>Row2 Column2</td><td>Row2 Column3</td> <td>Row2 Column4</td><td>Row2 Column5</td> </tr> <tr> <td>Row3 Column1</td><td>Row3 Column2</td><td>Row3 Column3</td><td>Row3 Column4</td><td>Row3 Column5</td> </tr> <tr> <td>Row4 Column1</td><td>Row4 Column2</td><td>Row4 Column3</td><td>Row4 Column4</td><td>Row4 Column5</td> </tr> <tr> <td>Row5 Column1</td><td>Row5 Column2</td><td>Row5 Column3</td><td>Row5 Column4</td><td>Row5 Column5</td> </tr> </tbody> </table> </div>

<script> $("#compare-tbl-2 td").hover(function() { $(this).parents('table').find('td:nth-child(' + ($(this).index() + 1) + ')'). add($(this).parent()).addClass('compare-hover'); }, function() { $(this).parents('table').find('td:nth-child(' + ($(this).index() + 1) + ')'). add($(this).parent()).removeClass('compare-hover'); }); </script>

I have 2 tables in a div and I would like to highlight the same row on both tables at the same time. Right now I only managed to get it to highlight columns and rows in 1 table.

(example: If i hover over "Row2 Column3" in tbl-2, Row2 in tbl-1 should be highlighted and viceversa)

Also how do i get it to highlight the th tag too?

<div class="row"> <div class="span2 pull-left"> <table class="table table-bordered pull-left" id="compare-tbl-1"> <thead> <th>Column 1</th> </thead> <tbody> <tr> <td> Row1 </td> </tr> <tr> <td> Row2 </td> </tr> <tr> <td> Row3 </td> </tr> <tr> <td> Row4 </td> </tr> <tr> <td> Row5 </td> </tr> </tbody> </table> </div> <div class="span10 pull-right"> <table class="table table-bordered" id="compare-tbl-2"> <thead> <th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th> </thead> <tbody> <tr> <td>Row1 Column1</td><td>Row1 Column2</td><td>Row1 Column3</td><td>Row1 Column4</td><td>Row1 Column5</td> </tr> <tr> <td>Row2 Column1</td><td>Row2 Column2</td><td>Row2 Column3</td> <td>Row2 Column4</td><td>Row2 Column5</td> </tr> <tr> <td>Row3 Column1</td><td>Row3 Column2</td><td>Row3 Column3</td><td>Row3 Column4</td><td>Row3 Column5</td> </tr> <tr> <td>Row4 Column1</td><td>Row4 Column2</td><td>Row4 Column3</td><td>Row4 Column4</td><td>Row4 Column5</td> </tr> <tr> <td>Row5 Column1</td><td>Row5 Column2</td><td>Row5 Column3</td><td>Row5 Column4</td><td>Row5 Column5</td> </tr> </tbody> </table> </div>

<script> $("#compare-tbl-2 td").hover(function() { $(this).parents('table').find('td:nth-child(' + ($(this).index() + 1) + ')'). add($(this).parent()).addClass('compare-hover'); }, function() { $(this).parents('table').find('td:nth-child(' + ($(this).index() + 1) + ')'). add($(this).parent()).removeClass('compare-hover'); }); </script>

最满意答案

尝试用以下代码替换脚本：

$("#compare-tbl-2 td").hover(function() { $(this).closest('tr').addClass('compare-hover'); var idx = $(this).closest('tr')[0].sectionRowIndex + 1; $('#compare-tbl-1').find('tr:nth-child(' + idx + ')').addClass('compare-hover'); }, function() { $(this).closest('tr').removeClass('compare-hover'); $('#compare-tbl-1').find('tr').removeClass('compare-hover'); });

的jsfiddle

Try replacing your script with this:

$("#compare-tbl-2 td").hover(function() { $(this).closest('tr').addClass('compare-hover'); var idx = $(this).closest('tr')[0].sectionRowIndex + 1; $('#compare-tbl-1').find('tr:nth-child(' + idx + ')').addClass('compare-hover'); }, function() { $(this).closest('tr').removeClass('compare-hover'); $('#compare-tbl-1').find('tr').removeClass('compare-hover'); });

jsFiddle