使用 jQuery 更改单击的表格行的颜色答案

【问题标题】：Changing the color of a clicked table row using jQuery使用 jQuery 更改单击的表格行的颜色
【发布时间】：2013-07-17 15:16:50
【问题描述】：

我需要你的帮助，

我怎样才能使用 jQuery，

更改我表格中所选行的背景颜色（对于这个例子，让我们使用css类“highlighted”

如果再次点击同一行，将其改回默认颜色（白色），选择 css 类“nonhighlighted”

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

.highlighted {
    background: red;
}
.nonhighlighted {
    background: white;
}
</style>

</head>

<body>

<table id="data" border="1" cellspacing="1" width="500" id="table1">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

</body>

</html>

【问题讨论】：

从这里开始：learn.jquery.com
在这方面您有没有自己做任何努力。喜欢使用选择器和点击事件？

标签： javascript jquery

【解决方案1】：

.highlight { background-color: red; }

如果你想多选

$("#data tr").click(function() {
    $(this).toggleClass("highlight");
});

如果您希望一次只选择表格中的 1 行

$("#data tr").click(function() {
    var selected = $(this).hasClass("highlight");
    $("#data tr").removeClass("highlight");
    if(!selected)
            $(this).addClass("highlight");
});

还要注意你的 TABLE 标签有 2 个 ID 属性，你不能这样做。

【讨论】：

我有一个表格，对于每一行，检查截止日期列，如果它超过今天的日期，则将该行字体颜色设为红色。我该如何做到这一点？

【解决方案2】：

创建一个应用行颜色的 css 类，并使用 jQuery 来打开/关闭该类：

CSS：

.selected {
    background-color: blue;
}

jQuery:

$('#data tr').on('click', function() {
    $(this).toggleClass('selected');
});

第一次单击将添加类（使背景颜色变为蓝色），下一次单击将删除该类，将其恢复为之前的状态。重复！

就您已经拥有的两个 CSS 类而言，我将更改 .nonhighlighted 类以默认应用于表格的所有行，然后打开和关闭 .highlighted：

<style type="text/css">

.highlighted {
    background: red;
}

#data tr {
    background: white;
}

</style>

$('#data tr').on('click', function() {
    $(this).toggleClass('highlighted');
});

【讨论】：

这是选择td，应该是选择tr吧？
错了！感谢您对我懒惰打字的敏锐观察！
我建议改为 $("#data tr")，以防同一页面上有其他表格。
更新了答案。好品控团伙！

【解决方案3】：

这是一个可能的解决方案，可以为您的表格的整行着色。

CSS

tr.highlighted td {
    background: red;
}

jQuery

$('#data tr').click(function(e) {
    $('#data tr').removeClass('highlighted');
    $(this).toggleClass('highlighted');   
});

演示：http://jsfiddle.net/jrthib/HVw7E/2/

【讨论】：

你如何让它取消突出显示最后选定的行并更改新选择的行的行颜色？
我更新了代码。您必须删除所有行上的类，然后将其添加到选定的行中。

【解决方案4】：

在你的 CSS 中：

.selected{
    background: #F00;
}

在 jquery 中：

$("#data tr").click(function(){
   $(this).toggleClass('selected');
});

基本上，您创建一个类并从选定的行中添加/删除它。

顺便说一句，您本可以付出更多努力，您的代码中根本没有 css 或 jquery/js xD

【讨论】：

【解决方案5】：

jQuery :

$("#data td").toggle(function(){
    $(this).css('background-color','blue')
},function(){
    $(this).css('background-color','ur_default_color')
});

【讨论】：

只高亮选中的单元格，不取消选中最后选中的行，当新的一行被选中时

【解决方案6】：

去掉表的第二个id声明：

<table id="data" border="1" cellspacing="1" width="500" **id="table1"**>

【讨论】：

【解决方案7】：

我不是 JQuery 方面的专家，但我有同样的情况，我能够做到这样：

$("#data tr").click(function(){
   $(this).addClass("selected").siblings().removeClass("selected"); 
});

风格：

<style type="text/css">

.selected {
    background: red;
}

</style>

【讨论】：

【解决方案8】：

。强调 { 背景颜色：木瓜鞭； }

$("#table tr").click(function() {    
 $("#table tr").removeClass("highlight");
            $(this).addClass("highlight");
});

【讨论】：

【解决方案9】：

改变单元格的颜色：

$(document).on('click', '#table tbody td', function (event) {


    var selected = $(this).hasClass("obstacle");
    $("#table tbody td").removeClass("obstacle");
    if (!selected)
        $(this).addClass("obstacle");

});

【讨论】：