如何在动态创建的表格中添加样式

Question

如何将边框添加到我的表格中，该表格是动态生成的。这是代码。

var table = document.createElement('table');
for (var i = 1; i < 4; i++){
    var tr = document.createElement('tr');   

    var td1 = document.createElement('td');
    var td2 = document.createElement('td');

    var text1 = document.createTextNode('Text1');
    var text2 = document.createTextNode('Text2');

    td1.appendChild(text1);
    td2.appendChild(text2);
    tr.appendChild(td1);
    tr.appendChild(td2);

    table.appendChild(tr);
}
document.body.appendChild(table); 

现在我如何在我的桌子上添加样式。我想在其中添加边框。

Answer 1

一种方法是在创建表后为表提供一个类setAttribute

var table = document.createElement('table');
table.setAttribute("class", "border_class");

并在 CSS 中添加边框样式

.border_class {
  border: 1px solid blue;
}

因此，每当它获取 class( .border_class) 时，样式就会自动应用

var table = document.createElement('table');
table.setAttribute("class", "border_class");

.border_class {
  border: 1px solid blue;
}