极客教程如何在 JavaScript 中对 HTML 表格的每个元素应用 IF 条件
使用 <table> 标记创建 HTML 表格，在其中使用 <tr> 标记创建表格行，使用 <td> 标记创建数据单元格。<td> 标签下的元素默认是普通且左对齐的。
HTML 表格允许 Web 作者将数据（如文本、图像、链接、其他表格等）排列成行和列。让我们深入了解如何将 if 条件应用于 HTML 表格中的每个元素。
将 if 条件应用于 HTML 表格中的每个元素
如果某个条件为真，if/else 语句将导致执行代码块。如果条件为假，可以运行另一个代码块。在 JavaScript 中，“条件”语句用于根据不同条件执行各种操作，其中包括 “if/else” 语句。
要将 if 条件应用于 HTML 表格中的每个元素，我们将使用 document.querySelectorAll.forEach()。
使用 document.querySelectorAll.forEach()
Document 函数 querySelectorAll() 返回一个静态（非实时） NodeList，它提供了一个匹配给定选择器集合的文档元素列表。
语法
以下是 document.querySelectorAll.forEach() 的语法。
querySelectorAll(selectors)
为了更好地理解如何将 if 条件应用于 HTML 表格中的每个元素，让我们看一下以下示例。
示例
在以下示例中，我们运行脚本并应用 if 条件来更改 HTML 表格中的元素值。
<!DOCTYPE html>
<html>
<body style="background-color:#9FE2BF">
<table>
<tr>
<td class="tutorial">RX100</td>
</tr>
<tr>
<td class="tutorial">BENZ</td>
</tr>
</table>
<script>
document.querySelectorAll(".tutorial").forEach(function(item) {
if (item.innerText.trim() === "RX100") {
item.innerText = "AUDI";
}
});
</script>
</body>
</html>
当执行脚本时，它将生成一个输出，其中包含通过应用 if 条件更改元素值并将值更改为“AUDI”所获得的在网页上显示的值。
示例
考虑以下示例，在此示例中，我们使用 if 条件运行脚本并更改 HTML 表格中一个元素的值。
<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1">
<table>
<tr>
<td class="tutorial">Raj</td>
</tr>
<tr>
<td class="tutorial">Maya</td>
</tr>
</table>
<button onclick=changevalue()>Click To Change</button>
<script>
function changevalue(){
document.querySelectorAll(".tutorial").forEach(function(item) {
if (item.innerText.trim() === "Maya") {
item.innerText = "Kamal";
}
});
}
</script>
</body>
</html>
运行上面的脚本，弹出一个包含网页元素和一个按钮的输出窗口。用户单击按钮后，触发事件，更改元素值，并在网页上显示它。