Question

我想通过使用jQuery更改其颜色来突出显示表行。进行RTFM，广泛试验和研究，运气不佳。

HTML：

<table id="waypointsTable" border="1">
<tbody>
<tr>
<td>some text</td>
</tr> ...

的javascript：

$('#waypointsTable > tbody > tr > td').hover(function() {
    alert(1);
}, function() {
    alert(2);
});

此时我只想尝试启动悬停功能。应该悬停在tr还是td？在选择表格行和td时，我是否总是必须包含tbody参考？在每个tr或td上放一个课而不是上面的方法更好吗？

感谢。

Answer 1

大部分看起来很好，如果你想触发每一行，你可以直接绑定到tr。

只是：

$('#waypointsTable tr').hover(function() {
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

（http://jsfiddle.net/nicholasstephan/8nbVG/处的完整代码）

应该有用......

对于这种情况，具体来说，使用css：hover伪选择器也可以完成这项工作。

#waypointsTable tr:hover {
    background-color:yellow;
}

Answer 2

<script type="text/javascript">

$("tr").not(':first').hover(
  function () {
    $(this).css("background","yellow");
  }, 
  function () {
    $(this).css("background","");
  }
);

</script>

Demo

Answer 3

如果要在行悬停时更改行的颜色，请将：hover放在行本身上。但请注意，行本身不能有背景颜色，只能有单元格，因此在CSS术语中，您需要这样：

tr td { background: normal background style here }
tr:hover td { background: hovered background style here}

Answer 4

另一种方式

   $('#waypointsTable tr').hover(function() {
          $(this).toggleClass('hover');
    });

css style

.hover {
    background-color:green;
}

Answer 5

以下是一些有用的链接。有关更多参考和演示，请参阅以下链接。

jQuery Change table row color on hover, getting hover events to work

JS：

$(function () {
    $("tr:not(:has(th))").mouseover(function () {
        $(this).addClass("hover");
    });
    $("tr:not(:has(th))").mouseleave(function () {
        $(this).removeClass("hover");
    });
});

CSS：

  .hover
    {
        background-color: #81B441;
    }

HTML：

<table class="tblBorder" border='1'>
<tr class="hover"><th>No</th><th>Page Name</th><th>No of View</th><th>Comments</th></tr>
<tr><td>1</td><td>Java Script</td><td>28</td><td>10</td></tr>
<tr><td>2</td><td>CSS</td><td>29</td><td>78</td></tr>
</table>

Answer 6

这将添加和删除css，但这不会对顶部表行执行此操作。例如你的标题行。

$("#waypointsTable tr").not(':first').hover(function(){
 $(this).addClass("tr-hover");
   },function(){
    $(this).removeClass("tr-hover");
   }
);

Answer 7

如果您想为将来添加的行触发事件，可以使用

$("#table_id").on("mouseover", 'tr' function () {
    //stuff to do on mouseover
});

Answer 8

不确定，但是尝试在其中放置一个带有类或id的div，看看是否有帮助。

jQuery - 在悬停时更改表格行颜色，让悬停事件生效

8 个答案: