数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究使用JavaScript在HTML表格的每个元素上应用IF条件？
HTML表格使用<table>标签创建，其中<tr>标签用于创建表格行，<td>标签用于创建数据单元格。<td>下的元素默认为普通文本左对齐。
HTML表格允许网页作者将文本、图像、链接、其他表格等数据排列成单元格的行和列。让我们深入文章，学习更多关于在HTML表格的每个元素上应用if条件的内容。
在HTML表格的每个元素上应用if条件
如果某个条件为真，则if/else语句会导致执行一段代码块。如果条件为假，则可以运行另一段代码块。JavaScript中的“条件”语句用于根据各种条件执行各种操作，包括“if/else”语句。
为了在HTML表格的每个元素上应用if条件，我们将使用document.querySelectorAll.forEach()。
使用document.querySelectorAll.forEach()
Document函数querySelectorAll()返回一个静态（非实时）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>
当脚本执行时，它将生成一个输出，其中包含通过应用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>
运行上述脚本后，将弹出输出窗口，显示包含网页按钮的元素。如果用户单击按钮，则会触发事件，更改元素值并在网页上显示它。
更新于：2023年4月21日
4K+ 浏览量
广告