javascript 更改动态添加行的颜色

Question

我在 HTA 中做了一个小脚本，它从文本文件中读取信息并在屏幕上显示信息。我有一个 table 和 header 行。

<table cellspacing="2" cellpadding="2" border="1" id="TablaResultados" style="font-size:10;">
  <tr bgcolor="#cd0041" align="center" style="color:white;">
    <th>Fecha</th>
    <th>Id Evento</th>
    <th>Tipo Evento</th>
    <th>Ubicacion</th>
    <th>Nombre</th>
    <th>Apellido</th>
    <th>Comentarios</th>    
  </tr>
</table>

在这个 table 中，我使用 javascript

动态添加了我阅读的信息行

function AgregarFila(Datos) {
  var table = document.getElementById("TablaResultados");
  var ArrDatos = Datos.split("@");
  var row = table.insertRow(1);
  var LargoArreglo = ArrDatos.length;

  for (var i = 0; i < LargoArreglo; i++){
    var cell1 = row.insertCell(i);
    cell1.innerHTML = ArrDatos[i];
    cell1.style.backgroundColor = "#99cc00"; 
  }
}

每 N 行我需要将行的颜色清除为白色，我正在使用这个

function TablaABlanco() {
  var table = document.getElementById("TablaResultados");
  var rows = table.getElementsByTagName("tr");

  for (var i = 1; i < rows.length; i++) {
    rows[i].style.backgroundColor = "#ffffff";
  }
}

我的问题是它不会改变行的颜色。我知道函数 TablaABlanco 确实有效，因为如果我运行从零开始 for loop 它会改变前一个 table 的 header 的颜色。

我认为我可能需要检查其他内容来验证新行，但我一直在谷歌搜索，但没有成功。

Answer 1

问题在于，在 AgregarFila 中，您将每个 单元格 设置为具有背景颜色。在 TablaABlanco 中，您将行设置为白色。单元格上的样式将优先并覆盖您应用于该行的样式。

因此，不是更改每个单元格以具有背景颜色，而是在添加时更改行的背景颜色。

function AgregarFila(Datos) {
    var table = document.getElementById("TablaResultados");
    var ArrDatos = Datos.split("@");
    var row = table.insertRow(1);
    row.style.backgroundColor = "#99cc00";

    var LargoArreglo = ArrDatos.length;
    for (var i = 0; i < LargoArreglo; i++){
        var cell1 = row.insertCell(i);
        cell1.innerHTML = ArrDatos[i];
    }
}

javascript 更改动态添加行的颜色

javascript change color of a dynamically added row

javascript

hta