Question

以下代码用于在单击复选框时突出显示表记录。但是一旦我刷新了页面，突出显示的记录就会消失。即使页面刷新后我怎样才能保持相同的突出显示记录？

<style>
    .highlight {
       background-color: yellow;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        $("#Table input").click(function() {
            if ($(this).is(":checked")) {
                $(this).parent().parent().addClass("highlight");
            } else {
                $(this).parent().parent().removeClass("highlight");
            }
        });
    });
    </script>
    <body>
    <div class="col-lg-10">
    <form name="f">
    <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

您必须将状态保存在某个位置，或者在URL中作为查询字符串保存，或者您可以使用浏览器localStorage。然后当页面加载时，检查该状态并相应地突出显示。

尝试这样的事情：

$("#Table input").click(function() {
    if ($(this).is(":checked")) {
        if(!localStorage.checked) {
            localStorage.checked = [];
        }
        localStorage.checked.push($(this));
        $(this).parent().parent().addClass("highlight");
    } else {
        for (var i = 0;i < localStorage.checked.length; i++) {
            var itemAtIndex = localStorage.checked[i];
            if(itemAtIndex == $(this)){
                localStorage.splice(i, 1);
            }
        }
        $(this).parent().parent().removeClass("highlight");
    }
});


//on page load
for (var i = 0;i < localStorage.checked.length; i++) {
    var itemAtIndex = localStorage.checked[i];
    itemAtIndex.parent().parent().addClass("highlight");
}

Answer 2

在stackoverfloweth的答案中写的想法是正确的，但他的代码确实不起作用。

使用工作的localStorage继承您的示例（此处不会在预览窗口中工作，但如果您在本地尝试，则会这样做）：

<style>
.highlight {
   background-color: yellow;
}
</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">
<form name="f">
<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>

如何在使用javascript刷新页面后记住点击的按钮？

2 个答案: