Как изменить фон строки таблицы в javascript?

Question

В javascript-коде я динамически добавляю строки в таблицу. Для каждого вызова добавляется еще одна строка. Основываясь на длине таблицы, как я должен реализовать .insideHTML для цвета ячейки. Таблица определяется в HTML, как

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

JavaScript (.js) имеет код для добавления одной строки по:

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="."; 

Моя первая попытка была вызвать целый ряд по:

row.style.backgroundColor = '0000FF';

Еще одна попытка, чтобы использовать это за пределами .js файл

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

} 

Answer 1

Ну ваша вторая попытка оказалась неудачной из-за этого:

From MDN:

Метод

Element.getElementsByTagName() возвращает живой HTMLCollection элементов с указанным именем тега.

Так что установка коллекции в стиле не работает, вам нужно будет ее закодировать и установить в отдельные элементы коллекции.

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

---

Но если установить его непосредственно при создании строки является ошибкой, у вас есть проблема CSS. Лучшим решением является использование классов

CSS:

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

Так что теперь установить класс в вашем JavaScript

row.classList.add("error"); 

или

row.className = "error";