Question

我需要你的帮助，

我如何使用jQuery

更改表格中所选行的背景颜色（对于此示例，我们使用css类“突出显示”

如果再次点击同一行，将其更改回默认颜色（白色）选择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>

Answer 1

.highlight { background-color: red; }

如果您想要多个选择

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

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

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

另请注意，您的TABLE标记有2个ID属性，您不能这样做。

Answer 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');
});

Answer 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/

Answer 4

在你的css中：

.selected{
    background: #F00;
}

在jquery中

：

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

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

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

Answer 5

jQuery：

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

Answer 6

删除表的第二个id声明：

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

Answer 7

我不是JQuery的专家，但我有相同的情况，我能够完成这样的事情：

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

风格：

<style type="text/css">

.selected {
    background: red;
}

</style>

Answer 8

。突出 { 背景颜色：papayawhip; }

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

Answer 9

要更改单元格的颜色，请执行以下操作：

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


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

});

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

9 个答案: