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

Question

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

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

---

示例:

cookie 说它是“Claus”。

---

原始表:

<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

希望表格有一个 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";
    }
}

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

更新:

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