用jQuery突出显示表行 [英] highlight table row with jquery

问题描述

我知道有很多帖子，但是我迷失了为什么我的行不通.

I know there are tons of posts on this, but I'm lost as to why mine doesn't work.

我要突出显示表格中的一行:

I'm trying to highlight a row in my table:

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

css:

.highlight {
   background-color: #a8cb17;
}

最后是我的jQuery:

and finally my jQuery:

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

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

基本上，我想突出显示一行并在选择新行时清除.这是我什至不知道的第一部分.

Basically I want to highlight a row and clear out when a new row is selected. This is the first part I can't even figure out.

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

In addition I want to highlight the entire row except I don't want the last column to trigger a highlight. In other words you can click the last column of the row but that won't change the highlight.

类似:

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

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

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

Any guidance on both of these issues is appreciated.

编辑:输入速度太快.语法错误只是我将其写出而不是复制...现在已修复

EDIT: typing too fast. Syntax errors are just me writing this out instead of copying...fixed now

推荐答案

首先请确保您的TD位于TR内-认为这可能只是您的问题，而不是您的代码，

Try making sure your TD is inside your TR, for a start -- thought it may just be your question, not your code, in error.

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

然后，尝试捕获<TD>上的click事件-而不是<TR>上的click事件.在TD上，许多事情比在TR上工作更好.

Then, try capturing the click event on the <TD> -- not on the <TR>. Many things work better on TD than on TR.

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

如果无法使其正常工作，请尝试仅捕获"td"，直到事件处理程序能够正常工作为止.出现一条日志消息. (我认为您使用的是Chrome或Firefox.)

If you can't get it to work, try just capturing on "td" until you can get the event-handler working & a log message appearing. (You're using Chrome or Firefox, I assume.)

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

Attaching the event-handlers to the table via an # ID selector, rather than the whole document, might also be more efficient.

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

AnhTú关于CSS高亮的评论也是正确的.使背景应用于TD，而不是TR.如果您仍然遇到问题，也可以尝试！important(尽管请参阅

Anh Tú's comment as to the CSS highlight, is also correct. Make it apply the background to the TD, not the TR. You can also try !important if you're still having trouble (though see http://css-tricks.com/when-using-important-is-the-right-choice/ for more info.)

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

谢谢Anh！希望这会有所帮助.

Thanks Anh! Hope this helps.

这篇关于用jQuery突出显示表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！