4

我知道有很多关于此的帖子，但我不知道为什么我的帖子不起作用。

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

<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");
});

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

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

4

4 回答 4

5 
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");
});
于 2013-05-07T03:26:27.317 回答
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”上捕获，直到您可以让事件处理程序工作并出现日志消息。（我假设您使用的是 Chrome 或 Firefox。）

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

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

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

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

谢谢安！希望这可以帮助。

于 2013-05-07T03:03:31.660 回答
0

在行上单击使用以下内容：

$('.row_selected').removeClass('row_selected');$(this).toggleClass('row_selected');
于 2014-04-01T08:53:36.693 回答
0

在您的代码中，您写道：

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

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

jQuery('table tr td:not(:last-child)').addClass("highlight");
于 2013-05-07T03:06:40.400 回答