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

时间：2017-06-23 10:07:16

标签： javascript jquery html client

如何在我的表中添加边框哪个表是动态生成的......代码是.. 

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

现在我怎么能在桌子上添加样式。我想在其中添加边框。

8 个答案:

答案 0 :(得分：2)

一种方法是在使用#include <iostream> #include <boost/multiprecision/cpp_int.hpp> template <typename T> T gcd(T a, T b) { T remainder{a % b}; while (remainder != 0) { a = b; b = remainder; std::cout << remainder << '\n'; // ignored remainder = a % b; } if (a < 0 && b < 0) b *= -1; // ignored return b; } int main(int argc, char* argv[]) { if (argc != 3) { std::cerr << '\n' << "Invalid number of argument(s)\n" << '\n' << "Usage: [number] [number]\n" << '\n'; return -1; } boost::multiprecision::cpp_int a{0}, b{0}; try { a = boost::multiprecision::cpp_int{argv[1]}; b = boost::multiprecision::cpp_int{argv[2]}; } catch (...) { std::cerr << '\n' << "Invalid argument(s) or numbers too large/small\n" << '\n' << "Usage: [number] [number]\n" << '\n'; return -1; } const boost::multiprecision::cpp_int vgcd = gcd(a, b); // call to gcd() std::cout << '\n' << "GCD (Greatest Common Divisor) test program using Euclid's algorithm (iterative)\n" << '\n' << "GCD(a, 0) = a\n" << "GCD(a, b) = GCD(b, a % b)\n" << '\n' << "GCD = " << vgcd << " Simplified fraction: " << a / vgcd << " / " << b / vgcd << '\n' << '\n'; }

创建表后为表提供一个类 
setAttribute

并在CSS中添加边框样式

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

因此，无论何时获得类（.border_class { border: 1px solid blue; } ），都会自动应用样式

＆＃13;
＆＃13; 
.border_class
＆＃13; 
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);
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

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

：

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

更多信息here

答案 2 :(得分：1)

您可以在class中定义边框，并使用table向table.className添加课程。

＆＃13;
＆＃13; 
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);
＆＃13; 
.tbl{
  border:2px solid #000000;
}
＆＃13;
＆＃13;
＆＃13;

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

＆＃13;
＆＃13; 
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);
＆＃13; 
table#tblBordered{
  border:2px solid #000000;
}
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

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

 table.classList.add('myTable')

＆＃13;
＆＃13; 
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);
＆＃13; 
.myTable {
  border: 1px solid green;
}
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

您可以使用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);

答案 5 :(得分：0)

将表格边框设置为1：

table.style.border = "1";

答案 6 :(得分：0)

<!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>

答案 7 :(得分：0)

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

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() 方法。

相关问题
最新问题