要遍历HTML表格以突出显示具有多个比较项的单元格中的差异,您可以使用JavaScript和CSS来实现。以下是一个示例代码,演示如何实现此功能:
HTML代码:
Highlighting Differences in HTML Table
Item
Value 1
Value 2
Value 3
Item 1
10
15
12
Item 2
20
25
20
Item 3
30
30
32
JavaScript代码(script.js):
window.addEventListener('DOMContentLoaded', (event) => {
var table = document.getElementById('myTable');
var rows = table.getElementsByTagName('tr');
// 遍历表格中的每一行(跳过表头)
for (var i = 1; i < rows.length; i++) {
var cells = rows[i].getElementsByTagName('td');
// 遍历当前行的每个单元格
for (var j = 1; j < cells.length; j++) {
var cellValue = parseInt(cells[j].innerText);
var prevCellValue = parseInt(cells[j - 1].innerText);
// 比较当前单元格的值与前一个单元格的值
if (cellValue !== prevCellValue) {
cells[j].classList.add('highlight');
} else {
cells[j].classList.remove('highlight');
}
}
}
});
CSS代码:
.highlight {
background-color: yellow;
}
此代码会遍历HTML表格中的每个单元格,并比较当前单元格的值与前一个单元格的值。如果两个值不相等,将在当前单元格中添加highlight
类,以便使用CSS样式将其突出显示。如果两个值相等,则从当前单元格中移除highlight
类。
请将上述代码保存为HTML文件,并确保将JavaScript代码保存为名为script.js
的单独文件。然后在浏览器中打开HTML文件,您将看到具有多个比较项的单元格中的差异会以黄色背景突出显示。
下一篇:遍历HTML标签