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

但是只显示一个隐藏列

这是因为您只选择了匹配这些选择器的第一个 td和th，但是（可能）有多个{{1匹配的（每行一个）。

为了继续前进（但不，继续阅读），您需要循环使用这些：

td

但，我可能会使用CSS解决方案，而您可以在表格中添加类，以显示这些列：

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";
    });
}

......等等。然后显示第2列（例如）：

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;
}

（或者更好的是，使用隐藏它们的document.querySelector("selector-for-the-table").classList.add("show2");类，并且只在适当时添加这些类。然后您不必执行hideX事情。）

旁注：block和display的默认td不是th，而是block。

Answer 2

你可以这样做：

var table=document.getElementById("divIdName");
var rows=table.getElementsByTagName("tr");
rows.forEach((row)=>{
  elems=row.getElementsByTagName("td");
 for(i=0;i<4;i++){
 elems[elems.length-4+i].style.display="block";
 }
 });

然而T. J. Crowders的答案要短得多......

在Javascript生成的表中更改单个列的CSS样式

2 个答案: