javascript - 使用 jquery 处理 html 表上动态行上的帖子

Question

我有一个动态表，我将把它提交到数据库。

html 看起来像这样:

<form id="upload">
   <div class="box-body">
      <div class="row">
         <div class="col-xs-12 col-md-12">
             <div class="box-body table-responsive no-padding">
                  <table class="table table-hover" id="tableReport">
                      <thead>
                        <th>TYPE</th>
                        <th>ITEM</th>
                        <th>DAMAGE</th>
                        <th>REPAIR</th>
                        <th>REMARKS</th>
                        <th>MANHOUR</th>
                        <th><button class="btn btn-block btn-primary" id="addRow" type="button">ADD</button></th>
                      </thead>

                      <tbody>
                         <!--GENERATED BY JQUERY-->
                      </tbody>
                   </table>
                </div>
              </div>
            </div>
          </div><!-- /.box-body -->

   <div class="box-footer">
      <button class="btn btn-info" type="submit">Upload</button>
   </div>
</form>

看，在我的<th>上，我有一个 id addRow 的按钮具有在最后一行添加一行的功能。 这是代码:

$(document).on('click', '#addRow', function () {
        var selType = '<select class="form-control" name="type">';
        var selItem = '<select class="form-control" name="item">';
        var selDamage = '<select class="form-control" name="damage">';
        var selRepair = '<select class="form-control" name="repair">';
        $.each(<?php echo json_encode($type); ?>, function (i, elem) {
            selType += '<option>' + elem.NAMA_TYPE + '</option>';
        });

        $.each(<?php echo json_encode($item); ?>, function (i, elem) {
            selItem += '<option>' + elem.NAMA_ITEM + '</option>';
        });

        $.each(<?php echo json_encode($damage_codes); ?>, function (i, elem) {
            selDamage += '<option>' + elem.NAMA_DAMAGE + '</option>';

        });

        $.each(<?php echo json_encode($repair_codes); ?>, function (i, elem) {
            selRepair += '<option>' + elem.NAMA_REPAIR + '</option>';
        });

        selType += '</select>';
        selItem += '</select>';
        selDamage += '</select>';
        selRepair += '</select>';

        $("#tableReport").find('tbody').append('<tr><td>' + selType +
                '</td><td>' + selItem +
                '</td><td>' + selDamage +
                '</td><td>' + selRepair +
                '</td><td><input type="text" class="form-control name="remarks" placeholder="Describe it..">' +
                '</td><td><input type="text" class="form-control time" name="manhour">' +
                '</td><td><button class="btn btn-block btn-danger">Delete</button>' +
                '</td></tr>');
        $(".time").inputmask("hh:mm");

    });

现在，这就是问题所在。如何处理form 。当<button class="btn btn-info" type="submit">Upload</button>点击提交，我会使用jquery ajax来处理。代码如下所示

$(document).on('submit', '#upload', function(){
  /*First, How to handled the dynamic row ?? */
  /* Commonly, I use var aVar = $('selector').val(); */
  /* Ex, I have two rows, How bout to handle two select option in different row ?*/

  $.ajax({
           url: 'LINK TO CHECK THE POST if has SUBMITTED',
           type: 'POST',
           data : {/*dynamic row that will be passed : data*/}
           dataType: 'json',
           success: function(obj) {   
       })
  return false;
});

如何处理该动态行，以及如何调试帖子是否成功？

已更新

此代码用于检查船舶容器的状况。如果一个容器有很多损坏，则用一行表示一个损坏。如果容器有 3 个损坏，则将有 3 行。我想将其提交到数据库中 tbl_damage_detail 的表中。我计划多次插入。所以，我想象将这些行存储到一个数组中。使用 foreach，我将插入它们。

JSFIDDLE

Answer 1

如果输入正确添加到表单中，您只需要使用 AJAX 提交表单，不需要任何特殊的东西，一种方法是使用像这样的 jQuery serialize() 方法。

$(document).on('submit', '#upload', function(event){
  $.ajax({
           url: 'LINK TO CHECK THE POST if has SUBMITTED',
           type: 'POST',
           data : $(this).serialize(),
           dataType: 'json',
           success: function(obj) {   
       })
  event.preventDefault();
});