Question

我知道这里有很多帖子，但我很遗憾为什么我的工作不起作用。

我正在尝试突出显示表格中的一行：

<tr class="videorow"><td>...</td>...</tr>
...

的CSS：

.highlight {
   background-color: #a8cb17;
}

最后我的jQuery：

jQuery(document).on("click", ".videorow", function() {

    //highlight table
    jQuery(".highlight").removeClass("highlight");
    jQuery(this).addClass("highlight");
});

基本上我想突出显示一行，并在选择新行时清除。这是我无法弄清楚的第一部分。

此外，我想突出显示整行，但我不希望最后一列触发突出显示。换句话说，您可以单击该行的最后一列，但不会更改突出显示。

类似的东西：

jQuery(document).on("click", ".videorow", function() {

    //highlight table
    jQuery(".highlight").removeClass("highlight");
    jQuery('table tr td:not(:last-child)').addClass("highlight");
});

对这两个问题的任何指导都表示赞赏。

编辑：输入太快。语法错误只是我写出来而不是复制...现在修复

Answer 1

jQuery(document).on("click", "tr.videorow > td", function() {
    var $this = jQuery(this);

    // ignore clicks on last column
    if ( $this.is(":last-child") ) return;

    // unhighlight currently selected row
    jQuery(".highlight").removeClass("highlight");

    // change the highlight of the row        
    $this.parent().addClass("highlight");
});

Answer 2

尝试确保你的TD在你的TR内，一开始 - 认为这可能只是你的问题，而不是你的代码，错误。

<tr class="videorow">
<td>...</td>
</tr>

然后，尝试捕获<TD>上的点击事件 - 而不是<TR>。 TD上的很多东西比TR更好。

$('document').on( "click", "tr.videorow td", function(ev) {
   console.log('click videorow event', ev);
   // do whatever.
});

如果你无法让它工作，请尝试捕获“td”直到你可以让事件处理程序工作＆amp;出现一条日志消息。（我假设您使用的是Chrome或Firefox。）

通过#ID选择器而不是整个文档将事件处理程序附加到表可能也会更有效。

$('#MyTable').on( ...);

AnhTú对CSS亮点的评论也是正确的。使其将背景应用于TD，而不是TR。如果您仍然遇到问题，也可以尝试！重要（尽管请参阅http://css-tricks.com/when-using-important-is-the-right-choice/了解更多信息。）

.highlight td {background-color: #a8cb17 !important;}

谢谢你！希望这会有所帮助。

Answer 3

在您的代码中，您写道：

jQuery(table tr td:not(:last-child)).addClass("highlight");

它有语法错误。传递给jQuery函数的参数不是string。把它改成了这个：

jQuery('table tr td:not(:last-child)').addClass("highlight");

Answer 4

行上的

单击使用以下内容：

$('.row_selected').removeClass('row_selected');$(this).toggleClass('row_selected');

用jquery突出显示表行

4 个答案: