javascript DOM操作之动态删除TABLE多行

2023年6月10日下午12:47 • JavaScript

我来给你详细讲解一下“JavaScript DOM操作之动态删除TABLE多行”的完整攻略。

什么是DOM操作？

在开始讲述删除TABLE多行的操作之前，先来简单介绍一下什么是DOM操作。DOM操作是指使用JavaScript对页面中的HTML元素进行增、删、改、查的操作。我们可以使用DOM操作改变页面中的元素的样式、内容、位置等等，从而实现我们所需的功能。

如何动态删除TABLE多行？

现在，我们来看看怎么动态删除TABLE多行。

步骤一：给删除按钮绑定事件

首先，在HTML中，我们需要为删除按钮绑定点击事件，代码如下：

<button id="delBtn">删除</button>

接着，在JavaScript中，我们需要获取该按钮元素，为其绑定点击事件，并写出删除行的函数，代码如下：

var delBtn = document.getElementById("delBtn");
delBtn.addEventListener("click", function() {
  deleteRows();
});

function deleteRows() {
  // 在这里编写删除多行的代码
}

步骤二：获取需要删除的行

在删除多行之前，我们需要获取到需要删除的行的信息。这里以表格中选中多行为例。代码如下：

function deleteRows() {
  var rows = document.getElementsByTagName("tr");
  var selectedRows = [];

  for (var i = 0; i < rows.length; i++) {
    var row = rows[i];
    var checkBox = row.getElementsByTagName("input")[0];

    if (checkBox.checked) {
      selectedRows.push(row);
    }
  }
}

在这段代码中，我们先获取到所有的行，然后循环判断哪些行的复选框被选中，将选中的行存储在一个数组中，以便删除。

步骤三：删除行

最后一个步骤就是删除选中的行了。代码如下：

function deleteRows() {
  var rows = document.getElementsByTagName("tr");
  var selectedRows = [];

  for (var i = 0; i < rows.length; i++) {
    var row = rows[i];
    var checkBox = row.getElementsByTagName("input")[0];

    if (checkBox.checked) {
      selectedRows.push(row);
    }
  }

  for (var i = 0; i < selectedRows.length; i++) {
    var row = selectedRows[i];
    row.parentNode.removeChild(row);
  }
}

在这段代码中，我们循环遍历选中的行，然后使用parentNode.removeChild方法将选中的行从DOM中删除。注意，在删除多个元素时，需先删除后面的元素，避免删除前面的元素对后面元素的位置产生影响。

示例

下面，我来给你提供两个示例说明：

示例一

在这个示例中，我们需要从一个包含多个表格的页面中删除选中的多个表格中的行。代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>删除多个表格中的行</title>
  </head>
  <body>
    <table>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
      <tr>
        <td><input type="checkbox" /></td>
        <td>小明</td>
        <td>20岁</td>
      </tr>
      <tr>
        <td><input type="checkbox" /></td>
        <td>小红</td>
        <td>24岁</td>
      </tr>
    </table>
    <table>
      <tr>
        <th>颜色</th>
        <th>尺寸</th>
      </tr>
      <tr>
        <td><input type="checkbox" /></td>
        <td>红色</td>
        <td>大</td>
      </tr>
      <tr>
        <td><input type="checkbox" /></td>
        <td>蓝色</td>
        <td>中</td>
      </tr>
    </table>
    <button id="delBtn">删除</button>
    <script>
      var delBtn = document.getElementById("delBtn");
      delBtn.addEventListener("click", function() {
        deleteRows();
      });

      function deleteRows() {
        var tables = document.getElementsByTagName("table");
        var selectedRows = [];

        for (var i = 0; i < tables.length; i++) {
          var rows = tables[i].getElementsByTagName("tr");

          for (var j = 0; j < rows.length; j++) {
            var row = rows[j];
            var checkBox = row.getElementsByTagName("input")[0];

            if (checkBox.checked) {
              selectedRows.push(row);
            }
          }
        }

        for (var i = selectedRows.length - 1; i >= 0; i--) {
          var row = selectedRows[i];
          row.parentNode.removeChild(row);
        }
      }
    </script>
  </body>
</html>

示例二

在这个示例中，我们需要从一个数据库中删除选中的多条数据。代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>删除多条数据</title>
  </head>
  <body>
    <table>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
      <tr>
        <td>1</td>
        <td>小明</td>
        <td>20岁</td>
        <td><input type="checkbox" /></td>
      </tr>
      <tr>
        <td>2</td>
        <td>小红</td>
        <td>24岁</td>
        <td><input type="checkbox" /></td>
      </tr>
    </table>
    <button id="delBtn">删除</button>
    <script>
      var delBtn = document.getElementById("delBtn");
      delBtn.addEventListener("click", function() {
        deleteRows();
      });

      function deleteRows() {
        var rows = document.getElementsByTagName("tr");
        var selectedRows = [];

        for (var i = 0; i < rows.length; i++) {
          var row = rows[i];
          var checkBox = row.getElementsByTagName("input")[0];

          if (checkBox.checked) {
            selectedRows.push(row);
          }
        }

        for (var i = selectedRows.length - 1; i >= 0; i--) {
          var row = selectedRows[i];
          var id = row.getElementsByTagName("td")[0].innerText;
          // 在这里实现删除数据的逻辑
          row.parentNode.removeChild(row);
        }
      }
    </script>
  </body>
</html>

以上就是关于“JavaScript DOM操作之动态删除TABLE多行”的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript DOM操作之动态删除TABLE多行 - Python技术站