如果单元格内容匹配，如何使用javascript更改表格中单元格的背景颜色

Question

我正在使用 Powershell 提取数据并生成 HTML 文件。 如果预期的状态是预期的或缺失的，我将添加一个额外的列来显示。

我正在尝试更新单元格 - 预期状态 - 背景（如果缺少则为红色，如果预期为绿色）

 var x = document.getElementById("tbody").getElementsByTagName("th"); x[0].innerHTML = "Missing"; x[0].style.backgroundColor = "Red"; var y = document.getElementById("tbody").getElementsByTagName("th"); y[0].innerHTML = "Missing"; y[0].style.backgroundColor = "Green";

 table { margin-bottom: 1em; border-collapse: collapse; } td, th { padding: .25em .5em; border: 1px solid #333; font: .75em "Verdana"; }

 <table id="Table"> <tbody> <tr> <th>Name</th> <th>InstallState</th> <th>Expected State</th> </tr> <tr> <th>Feature1</th> <th>Installed </th> <th>Expected</th> </tr> <tr> <th>Feature2</th> <th>Available </th> <th>Missing</th> </tr> </tbody> </table>

我希望根据生成的值自动对单元格进行颜色编码 1- 预期（绿色） 2- 缺失（红色）

谢谢，

Answer 1

你想要这样的东西吗？ 检查内部 HTML 是否等于每个元素。 如果是，则编辑该元素的 CSS

 var x = document.getElementsByTagName("th"); // get all the elements for the th tag Array.from(x).forEach((x) => { // convert the nodelist to array and forEach that array let theInnerHTML = x.innerHTML.toLowerCase().trim() // get the inner html for every array if (theInnerHTML == "expected") { // check if for every element that the inside html is equal to something. x.style.backgroundColor = "Green"; // If it is then edit the css of that element } if (theInnerHTML == "missing"){ // same here x.style.backgroundColor = "Red"; } })

 table { margin-bottom: 1em; border-collapse: collapse; } td, th { padding: .25em .5em; border: 1px solid #333; font: .75em "Verdana"; }

 <table id="Table"> <tbody id="tbody"> <tr> <th>Name</th> <th>InstallState</th> <th>Expected State</th> </tr> <tr> <th>Feature1</th> <th>Installed </th> <th>Expected</th> </tr> <tr> <th>Feature2</th> <th>Available </th> <th>Missing</th> </tr> </tbody> </table>

Answer 2

这是我会做的：

 // iterate over the nodelist of all th elements in #Table for (const th of Table.querySelectorAll('th')) { // depending on the lowercased, trimmed text in that th switch (th.textContent.toLowerCase().trim()) { // in case 'missing' case 'missing': th.style.backgroundColor = 'red'; break; // in case 'expected' case 'expected': th.style.backgroundColor = 'green'; break; // otherwise do nothing default: } }

 table { margin-bottom: 1em; border-collapse: collapse; } td, th { padding: .25em .5em; border: 1px solid #333; font: .75em "Verdana"; }

 <table id="Table"> <tbody> <tr> <th>Name</th> <th>InstallState</th> <th>Expected State</th> </tr> <tr> <th>Feature1</th> <th>Installed </th> <th>Expected</th> </tr> <tr> <th>Feature2</th> <th>Available </th> <th>Missing</th> </tr> </tbody> </table>

Answer 3

---

因为 tbody 也是一个标签名称，所以你还必须使用 tbody 来 getElementsByTagName。 但是因为这会给你一个数组，你还必须像这样访问该数组的第一个元素：

var x = document.getElementsByTagName("tbody")[0].getElementsByTagName("th");

---

或者你给那个 tbody 一个唯一的 ID 并通过它访问它：

<tbody id="myTableBody">

进而

var x = document.getElementById("myTableBody").getElementsByTagName("th");

Answer 4

其他人提供了有关正确 Javascript 解决方案的答案。 我的问题是：当你可以正确生成文档时，为什么要使用Javascript来修复源文档问题？

由于您使用 Powershell 构建 HTML，因此我假设您正在执行以下操作（我不是 Powershell 人员，因此这可能不是正确的语法） ：

if (isExpected($feature)) {
    $html = $html + '<th>Expected</th>'
} else {
    $html = $html + '<th>Missing</th>'
}

如果您希望这些特定的<th>具有特定的样式，只需添加一个类：

if (isExpected($feature)) {
    $html = $html + '<th class="expected">Expected</th>'
} else {
    $html = $html + '<th class="missing">Missing</th>'
}

然后你可以使用 CSS 设置正确的样式：

.expected {
    background-color: green;
}

.missing {
    background-color: red;
}

Answer 5

为了达到预期的结果，对所有元素使用document.querySelectorAll

1. 通过document.querySelectorAll获取所有元素
2. 通过for of循环所有第 th 个元素
3. 基于innerHTML内容，更新背景颜色

 var th = document.querySelectorAll('th') for (let cell of th) { if(cell.innerHTML === 'Expected'){ cell.style.backgroundColor = 'green' } if(cell.innerHTML === 'Missing'){ cell.style.backgroundColor = 'red' } }

 table { margin-bottom: 1em; border-collapse: collapse; } td, th { padding: .25em .5em; border: 1px solid #333; font: .75em "Verdana"; }

 <table id="Table"> <tbody> <tr> <th>Name</th> <th>InstallState</th> <th>Expected State</th> </tr> <tr> <th>Feature1</th> <th>Installed </th> <th>Expected</th> </tr> <tr> <th>Feature2</th> <th>Available </th> <th>Missing</th> </tr> </tbody> </table>