js删除表格选中行

在JavaScript中，删除表格（<table>）中的选中行通常涉及以下几个步骤：

基础概念

DOM操作：JavaScript可以通过DOM（文档对象模型）来访问和修改HTML文档的内容。
事件监听：通过事件监听器（如click事件）来捕捉用户的操作。
选择器：使用CSS选择器或JavaScript方法来选中特定的表格行。

类型

单行删除：删除用户选中的单行。
多行删除：删除用户选中的多行。

应用场景

数据管理界面：如后台管理系统中的数据表格。
任务列表：用户可以删除已完成或不再需要的任务。

示例代码

以下是一个简单的示例，展示如何删除选中的表格行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Delete Selected Rows</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        .selected {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table id="myTable">
        <tr>
            <th>Select</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="rowCheckbox"></td>
            <td>John Doe</td>
            <td>25</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="rowCheckbox"></td>
            <td>Jane Smith</td>
            <td>30</td>
        </tr>
        <!-- More rows as needed -->
    </table>
    <button onclick="deleteSelectedRows()">Delete Selected Rows</button>

    <script>
        function deleteSelectedRows() {
            const table = document.getElementById("myTable");
            const checkboxes = table.querySelectorAll(".rowCheckbox:checked");
            checkboxes.forEach(checkbox => {
                const row = checkbox.closest("tr");
                table.deleteRow(row.rowIndex);
            });
        }
    </script>
</body>
</html>

解释

HTML结构：表格中每一行都有一个复选框，用户可以通过勾选复选框来选择要删除的行。
CSS样式：简单的样式用于美化表格和选中行的背景色。
JavaScript函数：
- deleteSelectedRows函数获取所有被选中的复选框。
- 对于每一个被选中的复选框，找到其所在的行（<tr>），并使用deleteRow方法删除该行。