element动态添加新增一行并保存行

假设你是指在一个表格中动态添加一行，并将新增的行保存到后端数据库中。以下是一个基本的示例代码：

HTML:

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" name="name[]" /></td>
      <td><input type="text" name="email[]" /></td>
      <td><input type="text" name="phone[]" /></td>
      <td><button type="button" onclick="addRow()">Add Row</button></td>
    </tr>
  </tbody>
</table>
<button type="button" onclick="saveRows()">Save Rows</button>

JavaScript:

function addRow() {
  var table = document.getElementById("myTable").getElementsByTagName('tbody')[0];
  var row = table.insertRow(-1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);
  cell1.innerHTML = '<input type="text" name="name[]" />';
  cell2.innerHTML = '<input type="text" name="email[]" />';
  cell3.innerHTML = '<input type="text" name="phone[]" />';
  cell4.innerHTML = '<button type="button" onclick="deleteRow(this)">Delete</button>';
}

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

function saveRows() {
  var table = document.getElementById("myTable");
  var formData = new FormData(table);

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/save.php", true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send(formData);
}

这段代码做了以下几件事情：

1. 在表格的末尾添加一行，并为每个单元格添加一个输入框和“删除”按钮。
2. 在单击“删除”按钮时删除行。
3. 在单击“保存行”按钮时，使用XMLHttpRequest对象将表单数据发送到服务器。

请注意，此示例仅用于演示目的，并且需要使用后端脚本来实际保存行。在此示例中，我们将表单数据作为FormData对象发送到服务器。在服务器端，您可以使用PHP等脚本语言来接收表单数据并将其保存到数据库中。