在两个表格中添加 jQuery 悬停效果
Posted
技术标签:
【中文标题】在两个表格中添加 jQuery 悬停效果【英文标题】：Add jQuery hover effect across two tables 【发布时间】：2011-12-15 10:53:21 【问题描述】：divs 中有两个 html 表格并排浮动。第二个div 可以在水平方向滚动，因此实际上它看起来像一个大表，其中前几列被“冻结”，其他列可以滚动。
当用户将鼠标悬停在表格上时，以下 jQuery 非常适合突出显示表格中的一行：
$("table.grid tr:not(:first-child)")
.hover(
function () $(this).addClass("highlight"); ,
function () $(this).removeClass("highlight");
);
请注意，:not(:first-child) 可防止标头被突出显示。
我该如何修改它，以便它也突出显示另一个表中的相应行（也有一个 grid 类）？
换句话说，如果我将鼠标悬停在任一表中的nth 行上，则两个表中的nth 行都会突出显示。
编辑：HTML 看起来像：
<div>
<div style="float: left">
<table id="names" class="grid">
<tr><th>Last</th><th>First</th></tr>
<tr><td>Smith</td><td>John</td></tr>
<!-- etc -->
</table>
</div>
<div style="float: left; overflow-x: scroll">
<table id="results" class="grid">
<tr><th>Test 1</th><th>Test 2</th></tr>
<tr><td>50%</td><td>70%</td></tr>
<!-- etc -->
</table>
</div>
<div style="clear: both">
</div>
</div>
【问题讨论】：
【参考方案1】：诀窍是在开头获取所有<tr>s，然后组合$(this).index()、filter 和:nth-child 一次在两个表中选择正确的行：
var $trs = $('table.grid tr:not(:first-child)');
$trs.hover(
function()
var i = $(this).index() + 1;
$trs.filter(':nth-child(' + i + ')').addClass('highlight');
,
function()
var i = $(this).index() + 1;
$trs.filter(':nth-child(' + i + ')').removeClass('highlight');
);
演示：http://jsfiddle.net/ambiguous/54thG/
index 调用为您提供了 <tr> 相对于 $trs 中的兄弟姐妹悬停的位置，然后您调整 1，因为 index 是从零开始的，但 :nth-child（作为 CSS selector) 是基于 1 的，并且会同时在两行上调整类。
【讨论】：
我花 10 分钟准备自己的答案并没有完全浪费。 “过滤器”部分是我从 mu 的答案中学到的缺失部分，正如小提琴所显示的那样。【参考方案2】：这是我想出来的：
HTML：
<html>
<style>
.highlight background:gray;
</style>
<body>
<div>
<div style="float: left">
<table id="names" class="grid" style="width:200px">
<tr class="row0"><th style="width:40%">Last</th><th>First</th></tr>
<tr class="row1"><td>Smith</td><td>John</td></tr>
<tr class="row2"><td>Smith</td><td>John</td></tr>
<tr class="row3"><td>Smith</td><td>John</td></tr>
<tr class="row4"><td>Smith</td><td>John</td></tr>
<!-- etc -->
</table>
</div>
<div style="float: left; overflow-x: scroll">
<table id="results" class="grid" style="width:200px">
<tr class="row0"><th>Test 1</th><th>Test 2</th></tr>
<tr class="row1"><td>50%</td><td>70%</td></tr>
<tr class="row2"><td>50%</td><td>70%</td></tr>
<tr class="row3"><td>50%</td><td>70%</td></tr>
<!-- etc -->
</table>
</div>
<div style="clear: both"></div>
</div>
</body>
</html>
JS：
$(document).ready(function()
$("table#names tr:not(:first-child)").each(function(k, v)
var self = this;
// index: 0 = second row; 1= 3rd row... of table#names
// index+1 for other table's row: .find('tr.row'+(index+1))
(function(index)
$(self).hover(
function()
$(this).addClass("highlight");
// go up to parent div of #names, then its siblings, then the siblings' table's row
// you could also just $('table#results')
$('table#names').parent().siblings().find('tr.row'+(index+1)).addClass("highlight");
, function()
$('table#names').parent().siblings().find('tr.row'+(index+1)).removeClass("highlight");
$(this).removeClass("highlight");
);
)(k); // pass index so function above remembers it
);
);
JSFiddle：http://jsfiddle.net/6aNy2/
【讨论】：
以上是关于在两个表格中添加 jQuery 悬停效果的主要内容，如果未能解决你的问题，请参考以下文章