Question

我是新来的，找不到任何我想要的类似答案;我已经取得了进步，无法走得更远。下面是我的剪辑，当我在第二个到第二个TR之间盘旋时它会改变颜色。（第一个TR是标题，最后一个TR是页脚）。在可悬停范围之间，我如何选择它只包括第二个TD和第二个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

您可以尝试使用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/

Answer 2

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

$('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", "");
});

如果鼠标位于第一个和最后一个td之上，该功能仍将触发，但它们不会着色。

jsFiddle demo

您也可以将选择器与tr一起使用，从而无需使用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

jquery悬停范围的td

2 个答案: