Question

我有一个动态表格，我将提交给数据库。

html看起来像这样：

<div id='imagecontainer'>
  <img id='image' src='http://lorempixel.com/250/250/nature/1' />
</div>

请参阅我的<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>  </tbody> </table> </div> </div> </div> </div> <div class="box-footer"> <button class="btn btn-info" type="submit">Upload</button> </div> </form>，我有一个标识为<th>的按钮，该按钮具有在最后一行添加行的功能。这是代码：

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提交时，我将使用jquery ajax处理它。代码看起来像这样

<button class="btn btn-info" type="submit">Upload</button>

如何处理该动态行，如果帖子成功，我该如何调试？

已更新

此代码用于检查船舶集装箱的状况。如果一个容器有很多伤害，它将被代表一行作为一个伤害。如果容器有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();
});

Answer 2

使用您的代码，我真的不知道您想要做什么。

首先，“on”用于绑定事件与动态dom，但id = addRow不是动态dom，没有必要使用

"$(document).on('click', '#addRow', function () {"

只需使用$("#addRow").click( function () {...})

然后，<form id="upload">，我不确定您是否决定使用提交发布日期服务，事实上，这是一个动态表，如果您使用提交发布您的数据，它可能会与您的数据复杂化整个表数据。（使用submit，input必须设置名称标签）

我建议你应该处理每一行数据

//get every row data
var tableData = [] ; 
$("#tableReport tbody tr").each( function(){
    var tr = &(this);
    var text2 = tr.find(".time").val(); //should use more clean tag
    var data = {test2:test2}//...
    tableData.push(data)
    //use ajax with the data
});
//next handle the tableData with ajax

这个场景非常像mvvm：angular，vue.js或avalon.js，使用其中一个，更干净但代码更少。

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

2 个答案: