16

我需要你的帮助，

我怎么能，使用 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>
4

9 回答 9

51 
.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 属性，您不能这样做。

于 2013-07-17T15:28:30.323 回答
11

创建一个应用行颜色的 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');
});
于 2013-07-17T15:19:23.380 回答
5

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

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/

于 2013-07-17T15:21:28.740 回答
1

在你的 CSS 中：

.selected{
    background: #F00;
}

在jQuery中：

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

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

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

于 2013-07-17T15:21:29.323 回答
0

jQuery :

$("#data td").toggle(function(){
    $(this).css('background-color','blue')
},function(){
    $(this).css('background-color','ur_default_color')
});
于 2013-07-17T15:23:41.610 回答
0

删除表的第二个 id 声明：

<table id="data" border="1" cellspacing="1" width="500" **id="table1"**>
于 2014-12-16T14:45:36.017 回答
0

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

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

风格：

<style type="text/css">

.selected {
    background: red;
}

</style>
于 2016-04-19T16:16:50.620 回答
0

.highlight { 背景颜色：木瓜鞭；}

$("#table tr").click(function() {    
 $("#table tr").removeClass("highlight");
            $(this).addClass("highlight");
});
于 2016-05-03T10:47:54.973 回答
-1

要更改单元格的颜色：

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


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

});
于 2020-01-10T15:17:59.433 回答