Изменение CSS-стиля отдельных столбцов в таблице, сгенерированной Javascript

Question

Я создал таблицу для отображения данных JSON через цикл for в функции. Поскольку я создал таблицу таким образом, у нее нет идентификатора/класса.

Я спрятался последние три столбца таблицы в CSS с помощью следующего метода, где (п) является номер столбца:

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

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

Я пытаюсь отобразить их с помощью трех яваскрипта функций, используя 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"; } 

однако только один из скрытых столбцов отображается, и содержит только три рубрики (один на другой) и первые строки данных (один поверх другого) от каждого из трех.

Кто-нибудь знает, где я ошибаюсь, и как я могу получить полные столбцы для отображения?

EDIT: Я пропустил, что в функции showColumnN есть условие, чтобы проверить, находится ли конкретная строка в определенном массиве и приступить к раскрытию столбца, если это было так.

Answer 1

However only one of the hidden columns is displayed

Это потому, что вы только выбрали первыйtd и th соответствия этих селекторов, но (предположительно) многократный td s, что матч (один для каждой строки).

Чтобы продолжать идти так, как вы собираетесь (но делать не, продолжайте чтение), вы должны были бы перебрать те:

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

Однако, я бы, вероятно, использовать вместо этого вы можете добавить классы в таблицу, которая будет отображать эти столбцы:

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 вещь.).

---

Side Примечание: по умолчанию display для td и th не block, это table-cell.

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

Однако Т. Дж Crowders ответа гораздо короче ...