Question

此处Script用于使用jquery突出显示表行和列。 Demo Here

它会在悬停时突出显示整行和整列。我希望只悬停到当前单元格，而不是超出当前单元格行和列位置。

脚本

$("table").delegate('td','mouseover mouseleave', function(e) {
if (e.type == 'mouseover') {
  $(this).parent().addClass("hover");
  $("colgroup").eq($(this).index()).addClass("hover");
}
else {
  $(this).parent().removeClass("hover");
  $("colgroup").eq($(this).index()).removeClass("hover");
}
});

任何帮助？

JS Fiddle

Answer 1

您可以尝试以下代码：

<强> HTML ：

<table>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
</table>

<强> JS ：

$('td').on('mouseover mouseout', function(){
             $(this).prevAll().addBack()
             .add($(this).parent().prevAll()
             .children(':nth-child(' + ($(this).index() + 1) + ')'))
             .toggleClass('hover');
      });

Demo.

Answer 2

从JavaScript中删除.parent（）和$（＆＃34; colgroup＆＃34;）部分。

请在此处查看更新的小提琴：http://jsfiddle.net/eMEq6/6/

请注意，您最有可能只使用带有hover属性的CSS。

$("table").delegate('td','mouseover mouseleave', function(e) {
    if (e.type == 'mouseover') {
      $(this).addClass("hover");
    }
    else {  
        $(this).removeClass("hover");
    }
});

此外，请注意，您只能使用CSS执行相同的操作（尽管早期版本的浏览器可能不完全支持它）：http://jsfiddle.net/eMEq6/7/

td:hover {
    background-color: #eee;
}

Answer 3

我假设你想要这样的东西：FIDDLE

对于您要实现的目标，您无法提供完整的行/列背景颜色。您需要单独向单元格添加类。

为此你首先需要找到你正在悬停的行和列索引并突出显示所有td s，直到所有前一行的索引为止：

$("table").delegate('td','mouseover mouseleave', function(e) {
    var cellindex = 0;
    if (e.type == 'mouseover') {

我正在为当前悬停的单元格添加一个类，以了解何时停止。

        $(this).addClass("cell");

迭代当前行的所有单元格，直到找到该类。

        var cells = $(this).parent().children("td");
        for(var i=0;i<cells.length;i++){
            if($(cells[i]).hasClass("cell")){
                $(this).removeClass("cell");
                cellindex = i;
                break;
            }
        }

因此cellindex为我提供了当前列，我们想要突出显示该列。

然后我为行做同样的事情，我在当前悬停行中添加一个类来知道何时停止。

        $(this).parent().addClass("row");
        var rows = $(this).parent().parent().children("tr");

将悬停类添加到所有单元格，直到找到cellindex i。

        for(var i=0;i<rows.length;i++){
            var tds = $(rows[i]).children("td");
            for(var j=0;j<=cellindex;j++){
                $(tds[j]).addClass("hover");
            }
            if($(rows[i]).hasClass("row")){
                $(this).parent().removeClass("row");
                break;
            }
        }
    }

虽然您可以保留cell和row类并在此处执行相反操作，但我只是从所有tds中删除所有悬停类。

    else {
        $("td").removeClass("hover");
    }
});

编辑：重新阅读问题，这可能也是您想要的，只需稍作修改即可：FIDDLE

使用jquery突出显示表行和列

3 个答案:

Demo.