td的jquery悬停范围

Question

我是新来的，找不到任何与我想要的类似的答案；我已经取得了进步，不能再进一步了。下面是我的截图，当我悬停在最后一个 TR 的第 2 到第 2 之间时，它会改变颜色。 （第一个 TR 是标题，最后一个 TR 是页脚）。在可悬停范围之间，我如何选择它只包括 2nd TD 和 2nd last TD。

$('table#tblSchoolList tr:gt(0)').hover(function(){
    ////and not the last child (.next length = 0 means last)
    if ( $(this).next().length != 0 ){
        $(this).css("background", "red");  
    }
}, function(){
    $(this).css("background", "");
})

简而言之，表格悬停不包括第一个和最后一个 TR 和 TD。

TIA。

Answer 1

您可以将.find() 与以下选择器一起使用，以排除每个tr 的第一个和最后一个tds：

$('table#tblSchoolList tr:gt(0)').hover(function() {
    if ($(this).next().length != 0) {
        $(this).find('td:not(:first-child, :last-child)').css("background", "red");  
    }
}, function() {
    $(this).find('td:not(:first-child, :last-child)').css("background", "");
});

如果鼠标在第一个和最后一个tds 上，该函数仍然会触发，但它们不会着色。

jsFiddle demo

您还可以将选择器与 trs 一起使用，从而无需 if 语句：

$('table#tblSchoolList tr:not(:first-child, :last-child)').hover(function() {
    $(this).find('td:not(:first-child, :last-child)').css("background", "red");
}, function() {
    $(this).find('td:not(:first-child, :last-child)').css("background", "");
});

---

顺便说一句，我注意到我能够将您的所有 jQuery 代码转换为一个 CSS 规则（仅适用于现代浏览器）：

table#tblSchoolList tr ~ tr:not(:last-child):hover td ~ td:not(:last-child) {
    background: red;
}

当然，如果您想与旧版浏览器兼容或者无法弄清楚上述 CSS 的含义，您可以始终保留您的 jQuery 解决方案：)

jsFiddle demo

Answer 2

您可以尝试使用slice，如下所示：

$('table#tblSchoolList tr').slice(1,-1).hover( function(){
  $(this).css("background", "red");  
}, function(){
  $(this).css("background", "");
});

使用负数指定距离列表末尾的偏移量。所以：

slice(
  1, // omit first row
  -1 // omit last row
)

或者更简单地说：

$('table#tblSchoolList tr').slice(1,-1).hover( function(){
  $(this).toggleClass('highlight');
});

（假设您有一个 highlight 类来处理颜色行为）。

---

编辑： 更新以确保第一列和最后一列以及行不突出显示（感谢@boltclock）：

$('#foo tr').slice(1,-1).hover( function(){
  $(this).find('td').slice(1,-1).toggleClass('highlight');
});

这是一个非常简单的例子：http://jsfiddle.net/redler/Mgd8f/