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

Question

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.

Please show all of the relevant code, including the HTML and JavaScript. — Scott Marcus
– Scott Marcus, Commented Nov 18, 2016 at 15:36
Apologies. I'm very new to Javascript, and web dev in general, just recently started studying it. The code is very long and I wasn't sure what would count as totally relevant and what not. I have seen people here berated heavily for pasted too much 'irrelevant' code, so I tried to be as concise as possible. — Ian F
– Ian F, Commented Nov 18, 2016 at 16:57

T.J. Crowder · Accepted Answer · 2016-11-18 16:20:42Z

1

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.

edited Nov 18, 2016 at 16:20

answered Nov 18, 2016 at 15:41

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ian F Over a year ago

Thanks for the suggestions and help! I tried the first one but get "Uncaught TypeError: Cannot set property 'display' of undefined" when I try (having replaced the n associated with nth-child in querySelectorAll with the number of the column in question. I omitted the fact there is a conditional in the ShowColumnN function - would this make a difference? I haven't tried your CSS version of adding Classes as the table is created via a 'for loop' in a function, and I don't think I can add a Class to able created this way (or at least don't know how).

T.J. Crowder Over a year ago

@IanF: I confused my looping functions. Fixed above.

Ian F Over a year ago

It works! Thank you so much! I've been pulling my hair out over this for ages.

Jonas Wilms · Accepted Answer · 2016-11-18 16:53:11Z

0

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...

edited Nov 18, 2016 at 16:53

answered Nov 18, 2016 at 15:44

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

1 Comment

Ian F Over a year ago

Thank you for your help. I haven't tried it out as TJ's worked for me, but it's an interesting solution and one that makes sense even to a complete novice like me.

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related