极客笔记JavaScript 对HTML表格中的每个元素应用IF条件
HTML表格使用<table>标签创建，其中<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，该NodeList提供与给定选择器集合匹配的文档元素列表。
语法
以下是document.querySelectorAll.forEach()的语法。
querySelectorAll(selectors)
为了更好地理解如何对HTML表中的每个元素应用if条件，让我们看一下以下示例。
示例
在下面的示例中，我们运行脚本，并通过应用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>
当脚本被执行时，它将生成一个输出，该输出由通过应用条件语句并将元素值更改为”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>
在运行上述脚本时，输出窗口将弹出，显示元素以及一个用于网页的按钮。如果用户点击按钮，事件将被触发，改变元素的值，并将其显示在网页上。