如何根据条件更改HTML表格列中单元格的样式？

35g0bw71 于 2022-12-02 发布在其他

关注(0)|答案(1)|浏览(214)

我有一个HTML表格，其中的行和单元格是使用JavaScript动态创建的。我需要更改每一列中具有最低值和最高值的单元格的样式（背景颜色）。我如何实现这一点？我已经为同一列中的每个<td>标签提供了一个类。

<table id="table">
    <thead id="thead">
        <th>col1</th>
        <th>col2</th>
        <th>col3</th>
        <th>col4</th>
        <th>col5</th>
        <th>col6</th>
    </thead>
    <tbody id="tbody">

        //DYNAMICALLY ADDED TR AND TDS ADDED HERE

    </tbody>
</table>

Html

来源：https://stackoverflow.com/questions/74638941/how-do-i-change-the-style-of-a-cell-in-a-column-in-an-html-table-based-on-condit

1条答案

按热度按时间

31moq8wy1#

若要取得其中一个数据行的所有子系，您可以使用Element.children属性。之后，您可以重复此集合以取得每个子系的值，然后比较每个值以决定最大值和最小值。

const myElement = document.getElementById('thead');
for (const column of myElement.children) {
  var maximum = 0;
  var maximumElement;
  var minimum = 0;
  var minimumElement;
  for (const cell of column.children) {
    if (cell.value > maximum)
      maximumElement = cell;
    if (cell.value < minimum)
      minimumelement = cell;
  }
  maximumElement.style.backgroundcolor = 'green';
  minimumElement.style.backgroundcolor = 'red';
}

我希望它能帮助你

赞(0）回复(0）举报 2022-12-02

我来回答

如何根据条件更改HTML表格列中单元格的样式？

1条答案

相关问题

热门标签

最新问答