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.

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.

• javascript
• jquery
• html
• client

• 1 What does this have to do with asp? – VDWWD Commented Jun 23, 2017 at 10:10
• Possible duplicate of How to add a class to DOM element in JavaScript? – VDWWD Commented Jun 23, 2017 at 10:10
• it has audience so somebody can help me.. – janak gera Commented Jun 23, 2017 at 10:11
• 1 That is not how tags work. – VDWWD Commented Jun 23, 2017 at 10:12
• even if it has audience it is not a good way to find help – Hatik Commented Jun 23, 2017 at 10:12

8 Answers 8

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

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

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

More info here

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

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

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

Set table border to 1:

table.style.border = "1"; 

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

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.