动态添加删除表格行的js实现代码

以下是使用原生JavaScript实现动态添加和删除表格行的简单示例代码。这个例子假设你有一个HTML表格，并希望通过按钮操作来添加或删除行。

### HTML 结构

<table id="myTable">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <!-- 初始行 -->
        <tr>
            <td>张三</td>
            <td>30</td>
            <td><button class="delete-row">删除</button></td>
        </tr>
    </tbody>
</table>
<button onclick="addRow()">添加行</button>

### JavaScript 代码

function addRow() {
    // 获取表格的tbody部分
    var table = document.getElementById("myTable");
    var tbody = table.getElementsByTagName("tbody")[0];

    // 创建一个新的行(tr)元素
    var row = tbody.insertRow();

    // 插入数据到行中，这里仅添加姓名和年龄，操作为空（你可以添加自己的按钮逻辑）
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = "新姓名";
    cell2.innerHTML = "新年龄";
    cell3.innerHTML = '<button class="delete-row" onclick="deleteRow(this)">删除</button>';

    // 为删除按钮添加点击事件（使用闭包来绑定行元素）
    cell3.firstChild.onclick = function() {
        deleteRow(this);
    };
}

function deleteRow(button) {
    // 获取点击的按钮所在的行
    var row = button.parentNode.parentNode;
    // 从table中删除该行
    row.parentNode.removeChild(row);
}

在这段代码中，`addRow` 函数用于在表格的 `` 部分添加一个新行，每行包括三个单元格：姓名、年龄和一个删除按钮。删除按钮点击时会调用 `deleteRow` 函数，该函数接受按钮元素作为参数，并通过 DOM 操作找到并删除按钮所在的行。

请注意，这段代码是基于简单的表格操作示例，并假设表格已存在于页面上。你可能需要根据实际情况调整 HTML 结构和 JavaScript 代码。