html如何动态删除选中行

在HTML中，动态删除选中行是一个常见且实用的功能，要实现这个功能，我们可以通过JavaScript与HTML相结合的方式，对表格进行操作，下面，我将详细地介绍如何实现这一功能。

我们需要创建一个简单的HTML表格，表格中包含几行数据，并为每行添加一个复选框，以便用户选择要删除的行。

Markup

<!DOCTYPE html>
<html>
<head>
    <title>动态删除选中行</title>
</head>
<body>
    <table id="myTable">
        <tr>
            <th>选择</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="check"></td>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="check"></td>
            <td>李四</td>
            <td>30</td>
        </tr>
        <!-- 更多行数据 -->
    </table>
    <button onclick="deleteRow()">删除选中行</button>
</body>
</html>

我们将编写JavaScript代码来实现删除功能，在这段代码中，我们将通过获取表格中所有选中的复选框，然后遍历这些复选框并删除对应的行。

Markup

<script>
    function deleteRow() {
        var table = document.getElementById("myTable");
        var checkboxes = document.getElementsByName("check");
        for (var i = checkboxes.length - 1; i >= 0; i--) {
            if (checkboxes[i].checked) {
                // 获取当前复选框所在的行
                var row = checkboxes[i].parentNode.parentNode;
                // 删除行
                table.deleteRow(row.rowIndex);
            }
        }
    }
</script>