Question

我有一张旅馆的所有可用客房的桌子，如果有的话，我想使文本变成绿色。是否可以检查td的innerHTML以查看其是否显示“可用”？

var status = document.querySelectorAll("td");
if (status.innerHTML === "available") {
  classList.add("available-green");
}

.available-green {
  color: green;
}

<table>
  <tr>
    <td>booked</td>
    <td>available</td>
    <td>available</td>
    <td>booked</td>
  </tr>
</table>

Answer 1

“节点”接口的textContent属性表示节点及其后代的文本内容。

var Status = document.querySelectorAll("td");
Status.forEach(function(el) {
  if (el.textContent === "available") {
    el.classList.add("available-green");
  }
});

.available-green {
  color: green;
}

<table>
  <tr>
    <td>booked</td>
    <td>available</td>
    <td>available</td>
    <td>booked</td>
  </tr>
</table>

Answer 2

请阅读MDN

上的文档

var statuses = document.querySelectorAll("td");
statuses.forEach(status => {
  if (status.innerHTML === "available") {
   status.classList.add("available-green");
  }
})

.available-green {
  color: green;
}

<table>
  <tr>
    <td>booked</td>
    <td>available</td>
    <td>available</td>
    <td>booked</td>
  </tr>
</table>

Answer 3

您遇到了一些问题：

document.querySelectorAll将返回一个NodeList集合，因为在查询<td>标记时可以获得许多元素。因此，当您获得多个元素时，您可以使用NodeList遍历.forEach中的每个元素。
当前，您没有获得任何.classList，因此执行classList.add("available-green");将不会产生结果。相反，当使用forEach循环时，您可以使用当前元素（.forEach方法的第一个参数）作为更改classList的元素。
status是window的一部分中的预定义变量，通常最好不要使用它，因为它会导致意外的行为。
尽管不是必需的，但是如果不从元素中检索HTML，通常不认为使用.innerHTML是一种好习惯。相反，您可以在检索文本时使用.textContent。

请参见下面的工作示例：

var tableData = document.querySelectorAll("td"); // start variable names with lowercase letters & class names with upper

tableData.forEach(function(element) {
  if(element.textContent === "available") {
    element.classList.add("available-green");
  }
});

.available-green {
  color: lightgreen;
}

<table border=1>
  <tr>
    <td>booked</td>
    <td>available</td>
    <td>available</td>
    <td>booked</td>
  </tr>
</table>

Answer 4

querySelectorAll返回一个节点列表，我们可以将其作为数组工作，获得状态数组以检查必须在其上循环的值

var Status = document.querySelectorAll("td");
    console.log(Status);
    Status.forEach(element=>{
      if (element.innerHTML === "available"){
      element.classList.add("available-green");

      }
    })

.available-green {
      color: green;
    }

<table>
  <tr>
    <td>booked</td>
    <td>available</td>
    <td>available</td>
    <td>booked</td>
  </tr>
</table>

如何从js表中获取文本值

4 个答案: