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.

Solution 1

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

Solution 2

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

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

More info here

Solution 3

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

Solution 4

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

View more solutions

Comments

[VDWWD]

What does this have to do with asp.net?

[VDWWD]

Possible duplicate of How to add a class to DOM element in JavaScript?

[janak gera]

it has audience so somebody can help me..

[VDWWD]

That is not how tags work.

[Hatik]

even if it has audience it is not a good way to find help