正文

轻松掌握JS删除选中行的技巧，告别繁琐操作，让表格管理更高效！

/0 浏览量
0804

在网页开发中，表格是展示数据的一种常见方式。而删除表格中的行，是日常操作中经常遇到的需求。使用JavaScript，我们可以轻松实现这一功能，让表格管理变得更加高效。下面，就让我来为大家详细讲解如何使用JavaScript删除选中行。

选择合适的时机

在删除行之前，我们需要先选择合适的时机。一般来说，可以在以下几种情况下进行：

  1. 点击删除按钮时。
  2. 点击行时，显示删除按钮。
  3. 使用键盘快捷键（如按Delete键）。

下面，我们以点击删除按钮为例，讲解如何实现删除选中行。

HTML结构

首先，我们需要一个表格，并为每行添加一个删除按钮。以下是一个简单的HTML结构示例：

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>操作</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td><button class="deleteBtn">删除</button></td>
  </tr>
  <!-- 其他行 -->
</table>

CSS样式

接下来，我们可以为删除按钮添加一些样式，使其更加明显。以下是一个简单的CSS样式示例：

.deleteBtn {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

JavaScript代码

现在，我们来编写JavaScript代码，实现删除选中行的功能。

// 获取表格元素
var table = document.getElementById("myTable");

// 获取所有删除按钮
var deleteBtns = document.querySelectorAll(".deleteBtn");

// 为每个删除按钮绑定点击事件
deleteBtns.forEach(function(btn) {
  btn.addEventListener("click", function() {
    // 获取当前按钮所在的行
    var row = btn.parentNode.parentNode;

    // 删除当前行
    table.removeChild(row);
  });
});

完整示例

将以上HTML、CSS和JavaScript代码整合在一起，我们得到了一个完整的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>删除选中行</title>
  <style>
    .deleteBtn {
      background-color: #f44336;
      color: white;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <table id="myTable">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td><button class="deleteBtn">删除</button></td>
    </tr>
    <!-- 其他行 -->
  </table>

  <script>
    var table = document.getElementById("myTable");
    var deleteBtns = document.querySelectorAll(".deleteBtn");

    deleteBtns.forEach(function(btn) {
      btn.addEventListener("click", function() {
        var row = btn.parentNode.parentNode;
        table.removeChild(row);
      });
    });
  </script>
</body>
</html>

总结

通过以上方法，我们可以轻松实现使用JavaScript删除选中行的功能。在实际开发中，可以根据需求对代码进行修改和扩展，以满足不同的场景。希望这篇文章能帮助到大家，让表格管理变得更加高效！

-- 展开阅读全文 --