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来获取ElementsByTagName。但是，因为这将为您提供一个数组，所以您还必须像这样访问该数组的第一个元素：

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

或者您为该正文提供唯一的ID并通过该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个元素

通过document.querySelectorAll
用for of
基于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>

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

5 个答案: