如何在JavaScript中創建兩個表並使用不同的CSS？

Question

我需要創建兩個表。 這兩個表都是用JScript創建的，因為它們需要動態創建。 我知道當你制作兩個html表時，你可以通過分配如下標記來分隔它們：

table.table1 {...}
table.table1 tr {...}
table.table1 td {...}

table.table2 {...}
table.table2 tr {...}
table.table2 td {...}

但是在我的jScript中，我創建了第一個表，如下所示：

function makeCells() {
    var t = document.createElement("TABLE");

    for (var rows = 0; rows < 8; rows++) {
        var newRow = document.createElement("TR");
        console.log(newRow);
        t.appendChild(newRow);
        for (var cols = 0; cols < 8; cols++) {
            var newCell = document.createElement("TD");
            newRow.appendChild(newCell);
        }
    }
    document.body.appendChild(t);
}

那么我將如何創建具有不同名稱/標簽的兩個表，以便我可以將它們與兩個不同的CSS語句一起使用？

Answer 1

怎么樣...

function createTable(className) {
  var t = document.createElement("TABLE");
  t.className = className || "";

  for (var rows = 0; rows < 8; rows++) {
    var newRow = document.createElement("TR");
    console.log(newRow);
    t.appendChild(newRow);
    for (var cols = 0; cols < 8; cols++) {
        var newCell = document.createElement("TD");
        newRow.appendChild(newCell);
    }
  }
  document.body.appendChild(t); 
}

createTable("table1");
createTable("table2");

作為旁注，如果你不知道，大多數現代瀏覽器都有某種Dev Tools - 在Chrome，IE或Firefox中點擊F12，它應該彈出。 每個部分都有一個“控制台”部分（Chrome中的Esc），您不僅可以執行javascript，還可以瀏覽可用的功能和屬性。 為了回答你的問題，我打開了Chrome的開發工具，並做了：

var t = document.createElement("TABLE");
t.     // <-- browsed the list of available properties of t, found className and classList
t.className = "table1";
t      // Output: <table class="table1"></table>

我添加了這個，希望你能了解如何查看可用的內容，而不僅僅是記憶“.className”:-P