In the javascript code, I add rows dynamically to a table. For each call, another single row is added. Based on the length of the table how would I implement the .insideHTML to a cell color. Table is defined in the HTML as

    <table id="myTableData"  border="1" cellpadding="2" width = "100%">
    <tr bgcolor="#FF0000">
            <th>Delete</th>
            <th>Word</th>
            <th>Meaning</th>
            <th>Date Added (dd/mm/yyyy)</th>
     </tr>

     </table>

The javascript(.js) has the code to add a single row by:

var table = document.getElementById("myTableData");

var row = table.insertRow(rowCount);

    row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
    row.insertCell(1).innerHTML= "Hello";
    row.insertCell(2).innerHTML="World";
    row.insertCell(3).innerHTML=".";

My first attempt was to call the whole row by:

row.style.backgroundColor = '0000FF';

Another attempt was to use this outside of the .js file

var tableElements = document.getElementById("myTableData");
for(var j = 0; j < tableElements.length; j++)
{
    var tableCells = tableElements[j] ;

    var rows = tableCells.getElementsByTagName("tr") ;

    rows.style.backgroundColor = "red";

}

In the javascript code, I add rows dynamically to a table. For each call, another single row is added. Based on the length of the table how would I implement the .insideHTML to a cell color. Table is defined in the HTML as

    <table id="myTableData"  border="1" cellpadding="2" width = "100%">
    <tr bgcolor="#FF0000">
            <th>Delete</th>
            <th>Word</th>
            <th>Meaning</th>
            <th>Date Added (dd/mm/yyyy)</th>
     </tr>

     </table>

The javascript(.js) has the code to add a single row by:

var table = document.getElementById("myTableData");

var row = table.insertRow(rowCount);

    row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
    row.insertCell(1).innerHTML= "Hello";
    row.insertCell(2).innerHTML="World";
    row.insertCell(3).innerHTML=".";

My first attempt was to call the whole row by:

row.style.backgroundColor = '0000FF';

Another attempt was to use this outside of the .js file

var tableElements = document.getElementById("myTableData");
for(var j = 0; j < tableElements.length; j++)
{
    var tableCells = tableElements[j] ;

    var rows = tableCells.getElementsByTagName("tr") ;

    rows.style.backgroundColor = "red";

}

• javascript
• jquery
• html
• datatable
• getelementbyid

• 1 Why do you need JavaScript to set the background color? Why don't you just use some css to target the table row? – tabz100 Commented Jan 14, 2015 at 14:03
• possible duplicate of How to change background color of cell in table using java script – VMAtm Commented Jan 14, 2015 at 14:04
• Your tr background is being overriden by td backbround – VMAtm Commented Jan 14, 2015 at 14:05
• Are you wanting to use different colors for different rows, based on how many there are (based on this line in your question: "Based on the length of the table how would I implement the .insideHTML to a cell color.")? Or (based on your code logic) are you just trying to make all of the table rows one color? – talemyn Commented Jan 14, 2015 at 14:50
• What does tr and td backround? How would I overside the TR background? @vmatm – Chris Rathjen Commented Jan 15, 2015 at 11:15

4 Answers 4

Well your second attempt fails because of this:

From MDN:

The Element.getElementsByTagName() method returns a live HTMLCollection of elements with the given tag name.

So setting a collection to a style does not work, you would need to loop it and set it to the individual elements in the collection.

var rows = tableCells.getElementsByTagName("tr") ;
for (var i=0; i<rows.length; i++) {
    rows[i].style.backgroundColor = "red";
}

But if setting it directly when you create the row is a bug, you have a css problem. A better solution is to use classes

CSS:

row.error td { background-color: red; }

So now set the class in your JavaScript

row.classList.add("error");

or

row.className = "error";

I've tried the answer provided by epascarello and it didn't work for me. I've tried this and it worked:

for (var i=0; i<rows.cells.length; i++) {
    rows.cells[i].style.backgroundColor = "red";

<script>
var tableElements = document.getElementById("myTableData");
for(var j = 0; j < tableElements.rows.length; j++){
    var row = tableElements.rows.item(j);
    row.style.backgroundColor = "yellow";
}
</script>

Examples above did not work for me. I used this snipped at the bottom of the html file.

let bodyTab = document.querySelector('.tab').tBodies[0];
let trCount = bodyTab.rows.length;
for (let i = 1; i < trCount; i = i + 2)
{
    bodyTab.rows[i].style.backgroundColor = '#cccfff';
}