how to add style in table which is dynamically created

Question

how to add border into my table which table is dynamically generated..here is the code..

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

Now how can i add style on my table.I wanted to give border in it.

Possible duplicate of [How to add a class to DOM element in JavaScript?](https://stackoverflow.com/questions/1115310/how-to-add-a-class-to-dom-element-in-javascript) — VDWWD, Jun 23 '17 at 10:10

score 2 · Answer 1 · answered Jun 23 '17 at 10:10

2

before document.body.appendChild(table); write:

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

More info here

answered Jun 23 '17 at 10:10

Cristian Traìna

8,304
2
35
56

Nikhil Nanjappa · Answer 2 · 2017-06-23T10:17:15.683

One way would be to give a class to the table after creating it using setAttribute

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

and in your CSS add the border styles

.border_class {
  border: 1px solid blue;
}

So whenever it gets the class(.border_class), the styles are automatically applied

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

score 1 · Answer 3 · answered Jun 23 '17 at 10:11

You can use classList property to add() CSS classes.

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

score 1 · Answer 4 · answered Jun 23 '17 at 10:11

You can define border in a class and add class to your table with table.className.

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

On the other hand you can just style all the table elements or give id to table element and write specific styles to it.

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

score 0 · Answer 5 · answered Jun 23 '17 at 10:12

You can use 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);

score 0 · Answer 6 · answered Jun 23 '17 at 10:13

0

Set table border to 1:

table.style.border = "1";

answered Jun 23 '17 at 10:13

mikep

3,765
7
21

score 0 · Answer 7 · answered Mar 29 '20 at 09:43

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

score 0 · Answer 8 · answered Aug 06 '21 at 08:03

You can do it in two ways.

1.) By using style attribute which is attached to the DOM object.

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

2.) By using setAttribute() method.

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

And add the border styles in your CSS file.

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

NB: The preferred way to add styles in your element is the second one, using the setAttribute() method.

how to add style in table which is dynamically created

8 Answers8