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

【问题标题】：how to add style in table which is dynamically created如何在动态创建的表格中添加样式
【发布时间】：2017-11-26 20:59:47
【问题描述】：

如何在动态生成的表格中添加边框..这是代码..

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

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

【问题讨论】：

这和asp.net有什么关系？
How to add a class to DOM element in JavaScript?的可能重复
它有观众，所以有人可以帮助我..
标签不是这样工作的。
即使有观众，也不是寻求帮助的好方法

标签： javascript jquery html client

【解决方案1】：

document.body.appendChild(table); 之前写：

table.style.border = 'solid 1px black';

更多信息here

【讨论】：

【解决方案2】：

一种方法是在使用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;
}

【讨论】：

【解决方案3】：

您可以将classList 属性用于add() CSS 类。

 table.classList.add('myTable')

var table = document.createElement('table');
table.classList.add('myTable')
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);

.myTable {
  border: 1px solid green;
}

【讨论】：

【解决方案4】：

您可以在class 中定义边框，并使用table.className 将类添加到您的table。

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);
}
table.className="tbl";
document.body.appendChild(table);

.tbl{
  border:2px solid #000000;
}

另一方面，您可以为所有 table elements 设置样式，或将 id 指定给 table element 并为其编写特定样式。

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);
}
table.id="tblBordered";
document.body.appendChild(table);

table#tblBordered{
  border:2px solid #000000;
}

【讨论】：

【解决方案5】：

您可以使用table.style.border = "thick solid #0000FF";

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);
}
table.style.border = "thick solid #0000FF";
document.body.appendChild(table);

【讨论】：

【解决方案6】：

将表格边框设置为 1：

table.style.border = "1";

【讨论】：

【解决方案7】：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script>
  var table = document.createElement('table');
  table.style.border = "1px solid black";
  
  for (var i = 1; i < 4; i++){
    var tr = document.createElement('tr');   

    var td1 = document.createElement('td');
    var td2 = document.createElement('td');
    
    tr.style.border = "1px solid black";
    td1.style.border = "1px solid black";
    td2.style.border = "1px solid black";
    
    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); 
</script>
</body>
</html>

【讨论】：

【解决方案8】：

你可以通过两种方式做到这一点。

1.) 通过使用附加到 DOM 对象的style 属性。

var table = document.createElement('table');    
table.style.border = '1px solid black';

2.) 通过使用setAttribute() 方法。

var table = document.createElement('table');
table.setAttribute("class", "tbl-border");

并在您的 CSS 文件中添加边框样式。

.tbl-border {
  border: 1px solid black;
}

注意：在元素中添加样式的首选方法是第二种，使用 setAttribute() 方法。

【讨论】：