CODEWITHSUNDEEP
javascriptcss
Ian F
Ian F

Reputation: 17

Changing CSS styling of individual columns in a Javascript-generated table

I have created a table to display JSON data via a for loop in a function. Because I have created the table this way, it has no ID/Class.

I have hidden the last three columns of the table in CSS via the following method, where (n) is the column number:

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

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

I am trying to display them via three javascript functions, using queryselector but directly coping the CSS i.e. 

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

However only one of the hidden columns is displayed, and it contains just the three headings (one on top of another) and first row data (one on top of another) from each of the three.

Does anyone know where I'm going wrong and how I can get the full columns to display?

EDIT: I omitted that there was a conditional in the showColumnN function, to check whether a particular string is in a particular array and proceed with the column unveiling if this were so.

Upvotes: 0

Views: 92

Answers (2)

Jonas Wilms
Jonas Wilms

Reputation: 138457

You could do:

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

However T. J. Crowders answer is much shorter...

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075139

However only one of the hidden columns is displayed

That's because you've only selected the first td and th matching those selectors, but there are (presumably) multiple tds that match (one per row).

To keep going the way you're going (but don't, keep reading), you'd need to loop through those:

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

However, I'd probably use a CSS solution instead where you could add classes to the table that would show those columns:

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

...and so on. Then showing column 2 (for instance) is:

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

(Or better yet, use hideX classes that hide them, and only add those as appropriate. Then you don't have to do the block thing.)

Side note: The default display for td and th isn't block, it's table-cell.

Upvotes: 1

Related Questions