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

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;
}

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

var table = document.createElement('table');
table.setAttribute("class", "border_class");
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);

.border_class {
  border: 1px solid blue;
}