添加Row&通过ajax

时间:2015-12-16 20:31:18

标签: javascript php jquery mysql ajax

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

**继续我的表*:*

<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行,一旦用户输入了用户可以单击保存的信息,然后在表格下方就会出现一个用于添加新行的按钮。点击后,行immediatley出现在最后一行的下方,用户可以继续添加他们的员工。

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

这是我的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>

1 个答案:

答案 0 :(得分:0)

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