Question

我使用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

您可以使用.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>

Answer 2

添加名称和数组的属性名称。

$.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 3

您可以使用此代码循环输入并将其添加到数组

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

Answer 4

您可以使用解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

希望这会对你有所帮助。

Answer 5

在表格部分中，添加如下名称属性：

$.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";
}

从jquery动态表中获取数组中的所有输入值

5 个答案: