获取从动态表

Question

我已经使用jquery如下创建一个动态表一个jQuery一个阵列中的所有输入值：

$.ajax({ 
     data  : data, 
     type  : "get", 
     url  : url, 
     dataType : "json", 
     error : function(resp){ 
        alert("Error !!"); 
     },    
     success : function(resp){ 
        table = ''; 
        $.each(resp,function(indx,obj){ 
        table += '<tr>'; 
        table += '<td>'+parseInt(indx+1)+'</td>'; 
        table += '<td>'+'<input type="text" value="'+obj.ServiceDetail.service_code+'">'+'</td>'; 
        table += '<td>'+'<input type="text" value="'+obj.ServiceDetail.name+'">'+'</td>'; 
        table += '<td>'+'<input type="text" value="'+obj.ServicePrice.discount_price+'">'+'</td>'; 
        table += '</tr>';           
        }); 
        $("tbody#sevice_table_body").append(table); 
     }  
}); 

和一个按钮：

<input type="button" class = "btn btn-success btn-sm" value="submit" > 

现在我想一切通过单击提交按钮在数组中输入值，以便可以使用jquery ajax插入到数据库表中。

Answer 1

使用名称和数组添加属性名称。

$.ajax({ 
      data  : data, 
      type  : "get", 
      url  : url, 
      dataType : "json", 
      error : function(resp){ 
         alert("Error !!"); 
      },    
      success : function(resp){ 
         table = ''; 
         $.each(resp,function(indx,obj){ 
         table += '<tr>'; 
         table += '<td>'+parseInt(indx+1)+'</td>'; 
         table += '<td>'+'<input type="text" name="service_code[]" value="'+obj.ServiceDetail.service_code+'">'+'</td>'; 
         table += '<td>'+'<input type="text" name="name[]" value="'+obj.ServiceDetail.name+'">'+'</td>'; 
         table += '<td>'+'<input type="text" name="discount_price[]" value="'+obj.ServicePrice.discount_price+'">'+'</td>'; 
         table += '</tr>';           
         }); 
         $("tbody#sevice_table_body").append(table); 
      }  
    }); 

Answer 2

您可以使用此代码循环输入，并将它们添加到一个数组

var arrayOfVar = [] 
$.each($("input[type='text']"),function(indx,obj){ 
    arrayOfVar.push($(obj).val()); 
}); 

Answer 3

在这里，你去了一个解决方案

var inputData = []; 
 

 
$('button[value="submit"]').click(function(){ 
 
    $('input[type="text"]).each(function(){ 
 
    inputData.push($(this).val()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

希望这会帮助你。

Answer 4

在你的表款，加上name属性是这样的：

$.each(resp,function(indx,obj){ 
    table += '<tr>'; 
    table += '<td>'+parseInt(indx+1)+'</td>'; 
    table += '<td>'+'<input name="services[' + indx + '][code]" type="text" value="'+obj.ServiceDetail.service_code+'">'+'</td>'; 
    table += '<td>'+'<input name="services[' + indx + '][name]" type="text" value="'+obj.ServiceDetail.name+'">'+'</td>'; 
    table += '<td>'+'<input name="services[' + indx + '][price]" type="text" name="service[' + indx + '][price]" value="'+obj.ServicePrice.discount_price+'">'+'</td>'; 
    table += '</tr>';           
}); 

这将产生的名称，如services[0][code]，services[0][name]等，

现在，您可以访问输入值作为PHP数组：

$services = $_POST['services']; 
foreach ($services as $index => $service) { 
    $code = $service['code']; 
    $name = $service['name']; 
    $price = $service['price']; 

    echo "$index : $code, $name, $price \n"; 
} 

Answer 5

您可以使用.serializeArray()它将元素编码为名称和值的数组。

查找下面捣鼓更多信息

$(function() { 
 
    var data = $("#tbl2 :input").serializeArray(); // For converting it to array 
 
    //If needed below code is converting it to object 
 
    var obj = {}; 
 
    for (var i = 0, l = data.length; i < l; i++) { 
 
    obj[data[i].name] = data[i].value; 
 
    } 
 
    console.log(data); // Print Array in Console 
 
    console.log(obj);// Print Object in Console 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="tbl2"> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="tb3" value="1" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="tb4" value="2" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="tb5" value="3" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="tb6" value="4" /> 
 
    </td> 
 
    </tr> 
 
</table>