Question

以下代码用于在单击复选框时突出显示表记录。当第一个复选框单击表格记录以红色突出显示，当单击第二个复选框时，表格记录应以黄色突出显示，当点击第三个复选框时，表格记录应以绿色突出显示。虽然我在样式时使用了3种颜色当我点击它们时，它们会突出显示记录

    <style>
    .cb3 {background-color:yellow;}
    .cb2 {background-color:green;}
    .cb1 {background-color:red;}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    Array.prototype.remove = function() {
        var what, a = arguments, L = a.length, ax;
        while (L && this.length) {
            what = a[--L];
            while ((ax = this.indexOf(what)) !== -1) {
                this.splice(ax, 1);
            }
        }
        return this;
    };

    var checked = [];

    $(document).ready(function() {
        if (localStorage.getItem("checked") == null)
            localStorage.setItem("checked", checked);

        $("#Table input").click(function() {
            if ($(this).is(":checked")) {
                $(this).parent().parent().addClass("highlight");
                checked.push($(this).attr("id"));
            } else {
                $(this).parent().parent().removeClass("highlight");
                checked.remove($(this).attr("id"));
            }
            localStorage.setItem("checked", JSON.stringify(checked));
        });

        var saved = JSON.parse(localStorage.getItem("checked"));
        for (var i = 0;i < saved.length; i++) {
            var itemAtIndex = $("#" + saved[i] + "");
            itemAtIndex.click();
            itemAtIndex.parent().parent().addClass("highlight");
        }
    });
    </script>
    <body>
    <div class="col-lg-10">

    <table id="Table" border="1"><tr>
        <td><input type="checkbox" name="cb1" id="cb1" value="y" /></td>
        <td>Click me</td>
    </tr><tr>
        <td><input type="checkbox" name="cb2" id="cb2" value="y" /></td>
        <td>Click me</td>
    </tr><tr>
        <td><input type="checkbox" name="cb3" id="cb3" value="y" /></td>
        <td>Click me</td>
    </tr></

<table>
</div>

Answer 1

你的JS是对的。在HTML中，您只需将每个id移动到<tr>行，并为每个表记录添加一个类。

<tr id="cb1">
  <td><input type="checkbox" name="cb1" value="y" /></td>
  <td class=label>Click me</td>
</tr>

然后使用这个CSS：

#cb3.highlight .label {background-color:yellow;}
#cb2.highlight .label {background-color:green;}
#cb1.highlight .label {background-color:red;}

演示：JSFiddle

单击复选框时，使用3种不同的颜色突出显示表记录

1 个答案: