Javascript 使用jquery处理html表上动态行上的post

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

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>

这就是问题所在。如何处理

表单

。当点击

Upload

提交时，我将使用jqueryajax处理它。代码是这样的

$(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;
});

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

已更新

此代码用于检查船舶集装箱的状况。如果一个集装箱有多处损坏，则用一行表示为一处损坏。如果容器有3处损坏，将有3排。我想在我的数据库中的一个表上提交详细信息。我计划多次插入。因此，我设想将这些行存储到一个数组中。使用foreach，我将插入它们

---

如果输入被正确地添加到表单中，您只需使用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();
});

---

如果输入被正确地添加到表单中，您只需要使用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();
});

---

用你的代码，我真的不知道你想做什么

首先，“on”用于将事件与动态dom绑定，但id=addRow不是动态dom，不需要在上使用

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

只需使用

$（“#addRow”）。单击（函数（）{…}）

然后，

，我不确定您是否已决定使用submit将日期发布到服务，事实上，这是一个动态表，如果您使用submit发布数据，它可能会与整个表数据复杂。（使用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，使用其中的一个，使用更干净但更少的代码。

对于你的代码，我真的不知道你想做什么

首先，“on”用于将事件与动态dom绑定，但id=addRow不是动态dom，不需要在上使用

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

只需使用

$（“#addRow”）。单击（函数（）{…}）

然后，

，我不确定您是否已决定使用submit将日期发布到服务，事实上，这是一个动态表，如果您使用submit发布数据，它可能会与整个表数据复杂。（使用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，使用其中一个，使用更干净但更少的代码。

谢谢。顺便说一句，此代码用于检查船舶集装箱的状况。如果一个集装箱有多处损坏，则用一行表示为一处损坏。如果容器有3处损坏，将有3排。我想在我的数据库中的一个表上提交详细信息。我计划多次插入。因此，我设想将这些行存储到一个数组中。使用foreach，我将插入它们。谢谢。顺便说一句，此代码用于检查船舶集装箱的状况。如果一个集装箱有多处损坏，则用一行表示为一处损坏。如果容器有3处损坏，将有3排。我想在我的数据库中的一个表上提交详细信息。我计划多次插入。因此，我设想将这些行存储到一个数组中。使用foreach，我将插入它们。