添加行并通过ajax提交数据

I wondered if anybody could point me in the right direction. I have a single web page which has the following table:

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

**Heres my 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>

This produces 1 row, once the user has entered the information the user can click save and then beneath the table is a button for adding a new row. Once clicked the row immediatley appears beneath the last row and the user can carry on adding their members of staff.

这将产生1行,一旦用户输入了用户可以单击保存的信息,然后在表格下方是用于添加新行的按钮。点击后,行immediatley出现在最后一行的下方,用户可以继续添加他们的员工。

My question, which method is best for storing those members of staff in the database?

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

Here's my jquery I've had a go at the jquery but this is from another post and some of it applies when generating a new row but the inputs are wrong. Also i am slightly confused on how after clicking add new member the previous row will save to the database..

这是我的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 个解决方案

#1

Each time that the button is clicked, you get the input that has been entered. You then send that input data to your server with an AJAX request. On the server side, you run a query to add that data to your database. On the client's end, you can generate the table row with the entered data and insert it. You then clear the values of your input fields and start over again.

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

秒客网

添加行并通过ajax提交数据

1 个解决方案

#1

#1

相关文章