如何在 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>