Как получить текстовое значение из таблицы в js
У меня есть таблица доступных номеров в отеле, и я хочу сделать текст зеленым, если он доступен. Можно ли проверить innerHTML td, чтобы увидеть, написано ли оно «доступно»?
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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Свойство textContent интерфейса Node представляет текстовое содержимое узла и его потомков.
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>@AadneHaaland status и Status разные переменные. Попробуйте Status, когда вы установите его.
Прочтите документы на МДН
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>У вас есть несколько проблем:
document.querySelectorAllвернет коллекциюNodeList, так как вы можете получить много элементов при запросе тега<td>. Таким образом, когда вы получаете несколько элементов, вы можете вместо этого перебирать каждый элемент вNodeList, используя.forEach.В настоящее время вы ничего не получаете
.classList, поэтому выполнениеclassList.add("available-green");не даст результатов. Вместо этого при использовании циклаforEachвы можете вместо этого использовать текущий элемент (первый параметр метода.forEach) в качестве элемента для изменения списка классов.status— это предопределенная переменная, которая является частьюwindow, и обычно рекомендуется не использовать ее, поскольку это может привести к неожиданному поведению.Хотя это и не требуется, обычно не считается хорошей практикой использовать
.innerHTML, если вы не извлекаете HTML из вашего элемента. Вместо этого вы можете использовать.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>querySelectorAll возвращает список узлов, с которым мы можем работать как с массивом, мы получаем массив состояния для проверки значения, которое мы должны зациклить на нем.
var Status = document.querySelectorAll("td");
console.info(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>
я получил это сообщение об ошибке, когда попытался добавить его в свой код: «TypeError: status.forEach не является функцией».