JavaScript 根据值更改表格行颜色

如果您是一位 Javascript 开发人员，那么您可能需要根据值更改表格行颜色。这是实现此操作的简单代码片段。

准备

请先确保您的表格有一个 ID 属性。例如：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>23</td>
    </tr>
    <tr>
      <td>John</td>
      <td>32</td>
    </tr>
    <tr>
      <td>Jill</td>
      <td>42</td>
    </tr>
  </tbody>
</table>

代码

接下来，我们将编写 Javascript 代码。在这个例子中，我们将针对“年龄”列中大于 30 的行更改背景颜色。

// 获取表格
var table = document.getElementById("myTable");

// 获取表格中所有行
var rows = table.getElementsByTagName("tr");

// 遍历行
for (var i = 0; i < rows.length; i++) {
  // 获取当前行中的单元格
  var cells = rows[i].getElementsByTagName("td");

  // 如果年龄单元格中的值大于 30，则更改表格行颜色为红色
  if (parseInt(cells[1].innerHTML) > 30) {
    rows[i].style.backgroundColor = "red";
  }
}

解释

这段 Javascript 代码相对简单，并解释如下：

• 第一行代码获取表格元素，该元素具有 ID “myTable”。
• 第二行代码获取表格中所有行，并将其存储在“行”数组中。
• 在这个例子中，我们将遍历每一行，并获取每个行中的单元格。
• 如果单元格值满足某些条件（在此例中为：“年龄”大于 30），则将该行的背景颜色更改为红色。

这就是整个 Javascript 代码。您可以根据需要调整条件，以尽可能灵活地更改表格行的颜色。

结论

以上介绍了如何使用 Javascript 根据值更改表格行颜色。此代码段可用于任何具有 ID 的表格，以更好地管理和查看大型数据集。