使用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表格中元素的值。

Open Compiler
<!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表格中元素的值。

Open Compiler
<!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+ 浏览量

启动你的职业生涯

完成课程获得认证

开始
广告