javascript - 通过ajax添加Row并提交数据

Question

我想知道是否有人能给我指出正确的方向。我有一个网页，其中包含下表:

**这是我的 table *:*

<table id="staff" class="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email Address</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" class="form-control input-lg" name="first_name" placeholder="First Name">
      </td>
      <td>
        <input type="text" class="form-control input-lg" name="last_name" placeholder="Last Name">
      </td>
      <td>
        <input type="text" class="form-control input-lg" name="email" placeholder="Email (Optional)">
      </td>
      <td><a href="#">save</a></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">
        <button class="btn btn-block btn-primary btn-lg" id="addRow">Add Another Member</button><a href="addresident" class="pull-right" style="margin-top:10px;">Skip this step (Don't worry, you can add them later)</a></td>
    </tr>
  </tfoot>
</table>

这会生成 1 行，一旦用户输入了信息，用户就可以单击“保存”，然后表格下方有一个用于添加新行的按钮。单击后，该行立即出现在最后一行下方，用户可以继续添加其员工。

我的问题是，哪种方法最适合将这些员工存储在数据库中？

这是我的 jquery我尝试过 jquery，但这是来自另一篇文章，其中一些适用于生成新行，但输入是错误的。另外，我对单击“添加新成员”后如何将前一行保存到数据库感到有点困惑。

<script>
function addTableRow(jQtable) {
    var lastId = jQtable.find("tr:last td:first input").attr("data-id");
    var newId = parseInt(lastId) + 1;

    var row = $('<tr />');

    for (var i = 0; i <= 2; i++) {
        var thisId = newId + i;
        var cell = $('<td />');
        var input = $('<input type="text" class="form-control input-lg" data-id="' + thisId + '" />');
        cell.append(input);
        row.append(cell);
    }

    row.append('<td><a href="#">save</a></td>');
    jQtable.append(row);
}

$('#addRow').click(function() {
    addTableRow($('#mans'));
});

$(function () {
    $('table').on('click', 'tr a', function (e) {
        e.preventDefault();
        $(this).parents('tr').remove();
    });
});
</script>

Answer 1

每次单击该按钮时，您都会获得已输入的内容。然后，您可以通过 AJAX 请求将该输入数据发送到服务器。在服务器端，您运行查询以将该数据添加到数据库中。在客户端，您可以使用输入的数据生成表行并将其插入。然后，您清除输入字段的值并重新开始。