JS：将 table-cells 中的内容与 cookie 数据进行比较，并在成功时更改 CSS class

Question

我有一个预呈现的静态网站，我想在其中突出显示 table 单元格中的名称。该名称在服务器会话中写入用户或系统上的 cookie 中。此名称必须与列出的 table 单元格中的所有名称进行比较。然后必须将具有匹配名称的 table 单元格切换到给定的 class 以突出显示。我想这必须用JS来制作。不幸的是，我不太了解 JS。

如果有帮助，我可以在预呈现网站时将一些 JS 代码打印到每个 table 单元格中。也许这在更改 CSS class?

时有用

示例：

cookie 说它是 "Claus"。

原版Table：

<table>
 <tr><td class="tdback">Arnie</td></tr>
 <tr><td class="tdback">Mary</td></tr>
 <tr><td class="tdback">Claus</td></tr>
 <tr><td class="tdback">Donald</td></tr>
</table>

最终 Table:

<table>
 <tr><td class="tdback">Arnie</td></tr>
 <tr><td class="tdback">Mary</td></tr>
 <tr><td class="tdactive">Claus</td></tr>
 <tr><td class="tdback">Donald</td></tr>
</table>

Answer 1

要使用javascript获取cookies你可以参考：https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

好吧，希望 table 有一个 id，如果没有，您仍然可以通过其他方式获取该元素，但是对于这个例子，我将使用 id 获取它：

var cookie = "yourInnerHtml";
var list = document.getElementById("yourTable").getElementsByTagName("td");

for (var n = 0; n < list.length; n++) {
    if (list[n].innerHTML == cookie) {
        list[n].className = "tdactive";
    }
}

这应该适用于给定的示例。它首先获取 table 中的所有 "td" 元素，然后为每个元素检查 .innerHTML 是否与您的 cookie 相同。如果是，它会更改元素 class.

更新：

我删除了不必要的 return 语句，现在它应该可以工作，并突出显示所有出现的地方。

JS：将 table-cells 中的内容与 cookie 数据进行比较，并在成功时更改 CSS class

JS: Comparing content in table-cells with cookie data and changing CSS class when success

javascript

cookies

html-table

toggleclass

示例：

原版Table：

最终 Table: