javascript - 更改 Javascript 生成的表中各个列的 CSS 样式

Question

我已经创建了一个表来通过函数中的 for 循环显示 JSON 数据。因为我是这样创建表的，所以它没有 ID/Class。

我通过以下方法在 CSS 中隐藏了表格的最后三列，其中 (n) 是列号:

#divIdName table tr td:nth-child(n) { 
display: none; }

#divIdName table th:nth-child(n) { 
display: none; }

我试图通过三个 javascript 函数显示它们，使用 queryselector 但直接处理 CSS 即

function showColumnN () {
    if (ArrayName.indexOf("StringName")>-1) {
        var colNd = document.querySelector("td:nth-child(n)");
        var colNh = document.querySelector("th:nth-child(n)");
        colNd.style.display = "block";
        colNh.style.display = "block"; }

但是只显示隐藏列中的一个，它只包含三个标题(一个在另一个之上)和三个标题中的每一个的第一行数据(一个在另一个之上)。

有谁知道我哪里出错了以及如何显示完整的列？

编辑:我省略了 showColumnN 函数中的条件，以检查特定字符串是否在特定数组中，如果是这样，则继续显示列。

Answer 1

However only one of the hidden columns is displayed

那是因为您只选择了与这些选择器匹配的first td 和th，但是(大概)有多个匹配的 td(每行一个)。

要继续按照您的方式进行(但不要，请继续阅读)，您需要遍历这些内容:

function showColumnN(n) {
    showAll(document.querySelectorAll("td:nth-child(" + n + ")"));
    showAll(document.querySelectorAll("th:nth-child(" + n + ")"));
}
function showAll(list) {
    Array.prototype.forEach.call(list, function(element) {
        element.style.display = "block";
    });
}

但是，我可能会改用 CSS 解决方案，您可以在其中向表中添加类来显示这些列:

table.show1 tr > th:nth-child(1), table.show1 tr > td:nth-child(1) {
    display: block;
}
table.show2 tr > th:nth-child(2), table.show2 tr > td:nth-child(2) {
    display: block;
}

……等等。然后显示第 2 列(例如)是:

document.querySelector("selector-for-the-table").classList.add("show2");

(或者更好的是，使用隐藏它们的 hideX 类，并且只在适当的时候添加那些。这样你就不必做 block 事情了。)

---

旁注:td 和 th 的默认 display 不是 block，而是 表格单元格。