如何在javascript中更改一行表格的背景？答案

【问题标题】：How to change the background of a row of table in javascript?如何在javascript中更改一行表格的背景？
【发布时间】：2015-01-14 14:02:07
【问题描述】：

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

}

【问题讨论】：

为什么需要JavaScript来设置背景色？为什么不直接使用一些 CSS 来定位表格行？
How to change background color of cell in table using java script的可能重复
您的tr 背景被td 背景覆盖
您是否想根据行数为不同的行使用不同的颜色（基于您问题中的这一行："Based on the length of the table how would I implement the .insideHTML to a cell color."）？或者（根据您的代码逻辑）您是否只是想让所有表格行都变成一种颜色？
tr 和 td 的背景是什么？我将如何超越 TR 背景？ @vmatm

标签： javascript jquery html datatable getelementbyid

【解决方案1】：

您的第二次尝试因此失败：

From MDN:

Element.getElementsByTagName() 方法返回一个 live 具有给定标签名称的元素的 HTMLCollection。

因此将集合设置为样式不起作用，您需要循环并将其设置为集合中的各个元素。

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

但是如果在创建行的时候直接设置是个bug，那就是css的问题了。更好的解决方案是使用类

CSS：

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

现在在你的 JavaScript 中设置类

row.classList.add("error");

或

row.className = "error";

【讨论】：

这两种改变背景颜色的方法都不起作用。我应该提一下，每一行都是由按钮的函数调用添加的。因此，在row.insertCell(2).innerHTML="World"; 输入的数据之后，javascript 将不得不更改行颜色

【解决方案2】：

我已经尝试了 epascarello 提供的答案，但它对我不起作用。我已经尝试过了，它奏效了：

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

【讨论】：

有趣。 @epascarello 你想发表评论吗？

【解决方案3】：

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

上面的例子对我不起作用。我在 html 文件的底部使用了这个片段。

【讨论】：

【解决方案4】：

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

【讨论】：

你应该对代码做一些解释。