编程语言
首页 > 编程语言> > javascript更改动态添加的行的颜色

javascript更改动态添加的行的颜色

作者:互联网

我在HTA中做了一个小脚本,它从文本文件中读取信息并在屏幕上显示信息.
我有一个带标题行的表.

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

并在此表中我动态添加我使用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循环,它会改变上一个表的标题的颜色.

我相信我可能需要检查其他内容以验证新行,但我一直在谷歌搜索没有运气.

解决方法:

问题是在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,hta
来源: https://codeday.me/bug/20190702/1354670.html