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

但是如果在创建行时直接设置它是一个bug，那么你就会遇到css问题。更好的解决方案是使用类

CSS：

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

现在在JavaScript中设置类

row.classList.add("error");

或

row.className = "error";

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

1 个答案: