微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript – 使用jQuery更改点击的表行的颜色

我需要你的帮助,

我如何使用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>

解决方法

.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属性,你不能这样做.

原文地址:https://www.jb51.cc/jquery/151733.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐