动态添加删除一个表格的数据

以下是一个简单的示例，演示如何使用JavaScript动态添加和删除表格中的行：

HTML代码：

<table id="myTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Email</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>30</td>
            <td>john@example.com</td>
            <td><button onclick="deleteRow(this)">Delete</button></td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>25</td>
            <td>jane@example.com</td>
            <td><button onclick="deleteRow(this)">Delete</button></td>
        </tr>
    </tbody>
</table>
<button onclick="addRow()">Add Row</button>

JavaScript代码：

function addRow() {
    var table = document.getElementById("myTable").getElementsByTagName('tbody')[0];
    var newRow = table.insertRow();
    var nameCell = newRow.insertCell(0);
    var ageCell = newRow.insertCell(1);
    var emailCell = newRow.insertCell(2);
    var deleteCell = newRow.insertCell(3);
    nameCell.innerHTML = "New Name";
    ageCell.innerHTML = "New Age";
    emailCell.innerHTML = "New Email";
    deleteCell.innerHTML = '<button onclick="deleteRow(this)">Delete</button>';
}

function deleteRow(btn) {
    var row = btn.parentNode.parentNode;
    row.parentNode.removeChild(row);
}

在此示例中，我们首先定义了一个包含表格和一个添加行按钮的HTML代码块。当单击按钮时，`addRow()`函数将在表格中添加一个新行。此函数使用`insertRow()`方法在表格中插入新行，并使用`insertCell()`方法在新行中插入单元格。最后，我们使用`innerHTML`属性设置单元格中的文本和删除按钮的HTML。

当单击删除按钮时，`deleteRow()`函数将从表格中删除所在行。此函数使用`parentNode`属性找到要删除的行，并使用`removeChild()`方法从表格中删除该行。

请注意，在添加和删除行时，我们使用`getElementsByTagName()`方法找到表格的`tbody`元素。这是因为在HTML中，`<thead>`和`<tbody>`元素都是可选的，并且在某些情况下可能不存在。但是，我们需要在表格的`tbody`元素中插入和删除行。