Fatal编程技术网
  • javascript/
  • Javascript 使用jQuery更改已单击表行的颜色

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

javascript jquery

Javascript 使用jQuery更改已单击表行的颜色,javascript,jquery,Javascript,Jquery,我需要你的帮助 如何使用jQuery 更改我的表中所选行的背景色对于本例，让我们使用突出显示的css类 <!DOCTYPE html> <html> <head> <style type="text/css"> .highlighted { background: red; } .nonhighlighted { background: white; } </style> </head> <

我需要你的帮助

如何使用jQuery

更改我的表中所选行的背景色对于本例，让我们使用突出显示的css类

<!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>
如果再次单击同一行，则将其更改回默认颜色白色选择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>
创建一个应用行颜色的css类，并使用jQuery打开/关闭该类：

CSS:

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');
});
下面是一个可能的解决方案，它将为您的表的整行着色

CSS

jQuery

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

在css中：

.selected{
    background: #F00;
}
在jquery中：

$("#data tr").click(function(){
   $(this).toggleClass('selected');
});
基本上，您可以创建一个类，并将其添加/删除到所选行中

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

$("#data td").toggle(function(){
    $(this).css('background-color','blue')
},function(){
    $(this).css('background-color','ur_default_color')
});
如果你想要多个选择

$("#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");
});
还要注意，您的表标记有两个ID属性，您不能这样做。

删除表的第二个ID声明：

<table id="data" border="1" cellspacing="1" width="500" **id="table1"**>
我不是JQuery方面的专家，但我有相同的场景，我能够实现如下目标：

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

<style type="text/css">

.selected {
    background: red;
}

</style>
突出 { 背景色：木瓜鞭； }

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

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


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

});
从这里开始：在这方面你自己有没有做过任何努力。就像使用选择器和单击事件一样？这是选择td，它应该选择右侧的tr？错误是！谢谢你对我懒惰打字的敏锐观察者！我建议改为$data tr，以防同一页上有其他表格。更新答案。好的质量控制小组！如何让它取消对上一个选定行的监视并更改新选定行的行颜色？我更新了代码。您必须删除所有行上的类，然后将其添加到所选行。仅高亮显示所选单元格，不忽略最后一行，当选择新行时，我有一个表，对于每一行，检查到期日期列，如果它超过今天的日期，则将该行字体颜色设置为红色。我如何做到这一点？ 
<style type="text/css">

.selected {
    background: red;
}

</style> 

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

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


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

});