html 表格中根据数值变色
时间: 2024-02-18 09:00:45 浏览: 29
可以通过以下方式实现根据数值变色:
1. 在表格中设置一个 CSS 类,用于样式控制。
2. 在 HTML 表格中用 JavaScript 计算每个单元格的数值,并根据数值添加对应的 CSS 类。
3. 在 CSS 中设置每个 CSS 类的样式,以实现不同数值对应的不同颜色效果。
具体实现方式如下:
HTML 代码:
```html
<table>
<tr>
<td>100</td>
<td>50</td>
<td>75</td>
</tr>
<tr>
<td>80</td>
<td>60</td>
<td>90</td>
</tr>
</table>
```
CSS 代码:
```css
td {
padding: 5px;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.green {
background-color: green;
}
```
JavaScript 代码:
```js
const table = document.querySelector('table');
const cells = table.querySelectorAll('td');
cells.forEach(cell => {
const value = parseInt(cell.textContent, 10);
if (value < 60) {
cell.classList.add('red');
} else if (value < 80) {
cell.classList.add('orange');
} else {
cell.classList.add('green');
}
});
```
上述代码中,首先获取表格及其中的所有单元格,然后遍历每个单元格,获取其数值并根据数值添加对应的 CSS 类。最后,根据 CSS 类的样式设置表格单元格的背景颜色。