我使用Jquery生成这些动态字段,并以JSON格式存储数据以用于发票记录,并且我希望在从数据库中获取更新过程后,将这些存储的数据显示在这些字段中。 请帮忙我该怎么做?
查看:
<div class="row">
<div class="col-sm-12 table-responsive">
<div class="box-tools">
<button class="btn btn-xs btn-primary tableaction" data-action="add"><i class="fa fa-fw fa-plus"></i> Add More Items</button>
<button class="btn btn-xs btn-danger tableaction" data-action="remove"><i class="fa fa-fw fa-minus"></i> Remove Last One</button>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Sr.#</th>
<th>ITEM DESCRIPTION</th>
<th>HSN/SAC Code</th>
<th>Unit</th>
<th>Qty</th>
<th>Rate</th>
<th>Amount</th>
</tr>
</thead>
<tbody class="invoiceitems">
<tr class="invoiceitemdetail">
<td class="sno">1</td>
<td><?=form_input(array('name' => 'itemdesc[]','id' => 'itemdesc','type' => 'text','class' => 'form-control','placeholder' => 'Enter detail','value' => set_value('itemdesc[]')))?></td>
<td><?=form_input(array('name' => 'saccode[]','id' => 'saccode[]','type' => 'text','class' => 'form-control','placeholder' => 'Enter SAC Code','value' => set_value('saccode[]')))?></td>
<td><?=form_input(array('name' => 'units[]','id' => 'units[]','type' => 'text','class' => 'form-control inputcalqty','placeholder' => 'Enter Quantity','value' => set_value('units[]')))?></td>
<td><?=form_input(array('name' => 'quantities[]','id' => 'quantities[]','type' => 'text','class' => 'form-control inputcalunit','placeholder' => 'Enter Units','value' => set_value('quantities[]')))?></td>
<td><?=form_input(array('name' => 'rates[]','id' => 'rates[]','type' => 'text','class' => 'form-control inputcalprice','placeholder' => 'Enter Price','value' => set_value('rates[]')))?></td>
<td><?=form_input(array('name' => 'amount[]','id' => 'amount[]','type' => 'text','class' => 'form-control inputtotalamount','placeholder' => 'Total Amount','value' => set_value('amount[]')))?></td>
</tr>
</tbody>
</table>
</div>
</div>
Jquery:
<script>
$('button[data-action="remove"]').hide();
$('#invoicecreation').on('click','.tableaction',function(e){
e.preventDefault();
//console.log(appendctrl);
$('button[data-action="remove"]').show();
var dataact= $(this).data('action');
var totaltablerecords = $('.invoiceitemdetail').length;
var appendctrl = $('.invoiceitemdetail').eq(0).clone().find("input").val("").end();
if(dataact === 'add'){
$(appendctrl).appendTo('.invoiceitems');
}else if(dataact === 'remove'){
if(totaltablerecords > 1){
$('.invoiceitemdetail:last-child').remove();
if($('.invoiceitemdetail').length ==1){
$('button[data-action="remove"]').hide();
}
}else{
$('button[data-action="remove"]').hide();
}
}
$("td.sno").each(function(index,element){
$(element).text(index + 1);
});
});
</script>
答案 0 :(得分:0)
使用服务器端脚本(如php)在新页面上获取数据并将其转换为json。使用jquery循环功能进行循环并在UI上附加数据