jquery高亮显示表格行

我知道这里有很多帖子，但我失去了为什么我的行不通。jquery高亮显示表格行

我想强调我的表中的一行：

<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('table tr td:not(:last-child)').addClass("highlight"); 
});

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

编辑：输入速度太快。语法错误只是我写这个，而不是复制...现在修复

来源

2013-05-07 Tom

尝试改变CSS：'.highlight { 背景颜色：＃a8cb17; }' 至： '.highlight td {background} color：＃a8cb17; }' – 2013-05-07 03:01:47

除了语法错误（你的第二个选择器不在字符串中），这看起来很好。 – 2013-05-07 03:01:56

你目前的行为是什么？没有提供工作副本，很难说出发生了什么。 – xaxxon 2013-05-07 03:02:02

尝试确保您的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(...);

AnhTú对CSS亮点的评论也是正确的。使它适用于TD的背景，而不是TR。你也可以试试！重要的，如果你仍然有问题（虽然看http://css-tricks.com/when-using-important-is-the-right-choice/获取更多信息。）

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

感谢映！希望这可以帮助。

来源

2013-05-07 03:03:31

Hrmm，我迷路了。尝试了你的建议。点击事件没有被触发，但由于某种原因没有突出显示... – Tom 2013-05-07 03:26:18

调试 - 添加别的东西（比如说字体大小）到你的CSS中，检查'检查元素'是否被应用，检查正在应用的jQuery选择器它。 – 2013-05-07 03:30:57

奇怪的是，添加字体大小改变行字体的预期，但仍然没有突出显示...我把我的头发撕掉。 – Tom 2013-05-07 04:06:06

在代码中，你写道：

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

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

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

来源

2013-05-07 03:06:40

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-07 03:26:27 nbrooks

在行点击使用以下命令：

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

来源

2014-04-01 08:53:36

jquery高亮显示表格行

回答

相关问题