How to add CSS to a dynamic table created with javascript

Question

Basically I'm creating a dynamic table on javascript and displaying it in the html page. I also have a css file that works on static elements, but not on the table i'm creating dynamically. what can I do to style my dynamically created table?

I've tried this: table.classList.add('tablestyle'); but it doesn't work.

As you can imagne, I'm absolutly new to this kind of things.

I have 3 files:

reports.component.ts (that contains html. references to sccs & js are in the file and they work correctly)

<html>
<div class="block">
        <h1>STORICO DEI DATI</h1>
            <div id="myDynamicTable" class="table">
                <body onload="Javascript:addTable()"></body>
            </div>
        </div>
</html>

reports.component.js



function addTable() {

    let colonne = Math.floor(Math.random() * 5)+2;  
    let righe = Math.floor(Math.random() * 5)+2;  
    
    var today = new Date();
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
    var yyyy = today.getFullYear();
    
    today = mm + '/' + dd + '/' + yyyy;
    
    let providers = ["p1", "p2", "p3", "np4", "p5"];
    let testcases = ["tc1", "tc2", "tc3", "tc4", "tc5"];
    
      
    var myTableDiv = document.getElementById("myDynamicTable");
      
    var table = document.createElement('table');
    table.classList.add('tablestyle');
    
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
   
    

    for (var i=0; i<righe; i++){
       var tr =  document.createElement('tr');
       tr.style.backgroundColor = 'red';
       tableBody.appendChild(tr);
       
       for (var j=0; j<colonne; j++){
           var td = document.createElement('td');
           td.width='75';

           if(i==0){ 
                if(j==0){ //prima casella
                    addCell(td, tr, today);
                }
                else { //prima riga
                    addCell(td, tr, providers[j-1]);
                }
           }
           else {
               if(j==0){ //prima colonna
                    addCell(td, tr, testcases[i-1]);
               }
               else {
                    addCell(td, tr, Math.floor(Math.random() * 50));
               }
            
           }
        
          
       }
    }
    myTableDiv.appendChild(table);
    
}


function addCell(td, tr, valoreCella){
    td.appendChild(document.createTextNode(valoreCella));
    tr.appendChild(td);
}

report.component.scss (longer, but this is the part i want to work)

.tablestyle{
  font-weight: bold;
}

Please specific it doesn't work. The command table.classList.add('tablestyle') itself is correct and should work, unless old browser. — Lain
– Lain, Commented Nov 19, 2020 at 10:22
I have specified it.. anyway i'm not using an old browser. btw, which "body" tag?? — Martina Sasso
– Martina Sasso, Commented Nov 19, 2020 at 10:31
No, you did not. Does the class not get added? Does it throw an error? Does your style not get applied? Did you check the console for errors? Did you check the devtool-inspectior for the class attribute on the actual table? The body tag which holds your onload. — Lain
– Lain, Commented Nov 19, 2020 at 10:33

Lain · Accepted Answer · 2020-11-19 10:36:16Z

Made you a snippet of your code to show you that it works. Mayhap you have contradictions in your actual stylesheet.

Be aware to place the body tag at the correct hierarchy.

function addTable() {

    let colonne = Math.floor(Math.random() * 5)+2;  
    let righe = Math.floor(Math.random() * 5)+2;  
    
    var today = new Date();
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
    var yyyy = today.getFullYear();
    
    today = mm + '/' + dd + '/' + yyyy;
    
    let providers = ["p1", "p2", "p3", "np4", "p5"];
    let testcases = ["tc1", "tc2", "tc3", "tc4", "tc5"];
    
      
    var myTableDiv = document.getElementById("myDynamicTable");
      
    var table = document.createElement('table');
    table.classList.add('tablestyle');
    
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
   
    

    for (var i=0; i<righe; i++){
       var tr =  document.createElement('tr');
       tr.style.backgroundColor = 'red';
       tableBody.appendChild(tr);
       
       for (var j=0; j<colonne; j++){
           var td = document.createElement('td');
           td.width='75';

           if(i==0){ 
                if(j==0){ //prima casella
                    addCell(td, tr, today);
                }
                else { //prima riga
                    addCell(td, tr, providers[j-1]);
                }
           }
           else {
               if(j==0){ //prima colonna
                    addCell(td, tr, testcases[i-1]);
               }
               else {
                    addCell(td, tr, Math.floor(Math.random() * 50));
               }
            
           }
        
          
       }
    }
    myTableDiv.appendChild(table);
    
}


function addCell(td, tr, valoreCella){
    td.appendChild(document.createTextNode(valoreCella));
    tr.appendChild(td);
}

.tablestyle{
  font-weight: bold;
  color: green
}

<body onload="addTable()">
  <div class="block">
      <h1>STORICO DEI DATI</h1>
      <div id="myDynamicTable" class="table">
          <!--JS-->
      </div>
  </div>
</body>

Oleksii Pavlenko · Accepted Answer · 2020-11-19 10:21:18Z

0

Add

table.className = 'tablestyle'

or

table.setAttribute("class", "tablestyle");

answered Nov 19, 2020 at 10:21

Oleksii Pavlenko

1,3331 gold badge12 silver badges25 bronze badges

1 Comment

Donald Duck is with Ukraine Over a year ago

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.

Collectives™ on Stack Overflow

How to add CSS to a dynamic table created with javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related