如何将 CSS 添加到使用 javascript 创建的动态 table

Question

基本上我是在 javascript 上创建动态 table 并将其显示在 html 页面中。我还有一个适用于静态元素的 css 文件，但不适用于我正在动态创建的 table 。我可以做些什么来设置动态创建的样式 table?

我试过这个：table.classList.add('tablestyle'); 但它不起作用。

如你所想，我对这类事情绝对陌生。

我有 3 个文件：

reports.component.ts（包含 html。对 sccs 和 js 的引用在文件中并且它们正常工作）

<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（更长，但这是我想要工作的部分）

.tablestyle{
  font-weight: bold;
}

Answer 1

添加

table.className = 'tablestyle'

或

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

Answer 2

为您制作了一段代码，以向您展示它的工作原理。可能您的实际样式表中存在矛盾。

注意将 body 标记放在正确的层次结构中。

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>

如何将 CSS 添加到使用 javascript 创建的动态 table

How to add CSS to a dynamic table created with javascript

html

javascript

css

dynamic-tables