獲取從動態表

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>