用jquery突出显示表行答案

【问题标题】：highlight table row with jquery用jquery突出显示表行
【发布时间】：2014-04-01 16:53:36
【问题描述】：

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

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

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

感谢您就这两个问题提供任何指导。

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

【问题讨论】：

尝试将 css:.highlight { background-color: #a8cb17; } 更改为：.highlight td{ background-color: #a8cb17; }
除了语法错误（你的第二个选择器不在字符串中）这看起来不错。
您看到的当前行为是什么？如果不提供工作副本，就很难知道发生了什么。
看起来不错jsfiddle.net/RRK2M/1
@AnhTú 这是不正确的。他只是想在点击时应用这个类。不是默认加载

标签： jquery css

【解决方案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");
});

【讨论】：

【解决方案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;}

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

【讨论】：

嗯，我迷路了。试过你的建议。点击事件确实被触发，但由于某种原因没有突出显示......
调试——在你的 CSS 中添加其他东西（比如字体大小），检查“检查元素”是否正在应用，检查应用它的 jQuery 选择器。
很奇怪，添加字体大小会按预期更改行字体，但仍然没有突出显示......我正在扯掉我的头发。
也许您在 TD 单元格上有更具体的 CSS 或 style 属性，其优先级高于 .highlight。解决这个问题，或者在您的突出显示 CSS 样式中尝试 !important。
+1 我讨厌 CSS！你明白了。谢谢你一直陪着我。否决票是怎么回事？

【解决方案3】：

在您的代码中，您写道：

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

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

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

【讨论】：

【解决方案4】：

在行点击使用以下：

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

【讨论】：