I want to add row and change the style of it. I use javascript to add cell and row, but I can't change style the of cell and can't change the property of new row.

Any one please suggest to change it. Let my script is

var table = document.getElementById("dataTable");
var row = table.insertRow(5);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
cell3.innerHTML = "NEW CELL3";
cell4.innerHTML = "NEW CELL4";

I want to add row and change the style of it. I use javascript to add cell and row, but I can't change style the of cell and can't change the property of new row.

Any one please suggest to change it. Let my script is

var table = document.getElementById("dataTable");
var row = table.insertRow(5);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
cell3.innerHTML = "NEW CELL3";
cell4.innerHTML = "NEW CELL4";

• javascript
• html

• Where have you applied the style ? – Rayon Commented Feb 5, 2016 at 8:34
• Mr. Shrestha you can change the cell style using Javascript . For example cell.style.textAlign = "center"; – androidGenX Commented Feb 5, 2016 at 8:36
• See this list for a mapping between the css styles and the javascript names: developer.mozilla/en-US/docs/Web/CSS/… Or set element.className = 'myclass'; – Thomas Ghesquiere Commented Feb 5, 2016 at 8:38
• thank u. what about height,width and bgcolor? – user5863306 Commented Feb 5, 2016 at 9:00

2 Answers 2

You can set the height and color like this :

document.getElementById('dataTable').style.backgroundColor="#FFFFFF";
document.getElementById('dataTable').style.height="50";
document.getElementById('dataTable').style.textAlign="center";

Use element.style.property='value' to set the style of the element.

If there are multiple css properties to be assigned then use classes(.className) over .style.propertyName

Try this:

var table = document.getElementById("dataTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
cell3.innerHTML = "NEW CELL3";
cell4.innerHTML = "NEW CELL4";
cell1.className = 'yourClass';
cell2.className = 'yourClass';
cell3.className = 'yourClass';
cell4.className = 'yourClass';

.yourClass {
  height: 50px;
  text-align: center;
  background-color: #FFFFFF
}

<table id='dataTable'>
  <table>