Ajax返回并将HTML数据附加到表行中
[英]Ajax return and append HTML data into table row
问题描述
I have problem with ajax return html data. 
我在用ajax返回html数据时遇到问题。 Idea is I have dynamic table that user can add or delete table row, in each of table row there is button that will show modals and user can choose Item, but after user add rows and choose item, item goes to first rows not to new row. 想法是我有一个动态表，用户可以添加或删除表行，每个表行中都有一个显示模式的按钮，用户可以选择项目，但是在用户添加行并选择项目后，项目转到第一行而不是新行行。
Please your help. 请你帮忙。
this is my HTML: 这是我的HTML：
<tr id='addr0' class="itemsGroup">
<td>
1
</td>
<td width="240px">
<div class="input-group" >
<input type="text" name="barang_id" class="form-control" value="<?php echo @$rowID->barang_id != '' ? $rowID->barang_id : $this->session->flashdata('barang_id') ;?>">
<span class="input-group-addon" id="basic-addon1">
<a href="#myModalItems" class="trash" role="button" data-toggle="modal"><span class="glyphicon glyphicon-list"></span></a></span>
</div>
</td>
<td>
<input type="text" name="barang_name[]" class="form-control" >
</td>
<td>
<input type="text" name="barang_satuan[]" class="form-control" >
</td>
<td>
<input type="text" name="barang_unit_price[]" class="form-control" >
</td>
<td>
<input type="text" name="barang_qty[]" class="form-control" >
</td>
</tr>
My Modal : 我的模态：
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Items</h4>
</div>
<div class="modal-body"><div class="panel panel-default" >
<div class="panel-heading">
<table id="mytablex" class="display" >
<thead>
<tr >
<th width="55px" style="text-align:center;"> </th>
<th width="55px" style="text-align:center;">No.</th>
<th width="240px" style="text-align:center;">Item No.</th>
<th width="240px" style="text-align:center;">Item Name</th>
</tr>
</thead>
<tbody>
<?php
$counter = 1;
if ($resultBarang) {
foreach ($resultBarang as $row) {
if ($counter%2 ==0) { $class = 'list01';}else {$class = 'list02';}
?>
<tr class="<?php echo $class;?>">
<td width="55px" align="center"><input type="radio" onclick="getItemsID(this.value);" name="supid" id="supid" value="<?php echo $row->barang_id;?>"></td>
<td width="55px" align="center"><?=$counter?>.</td>
<td width="240px" ><?=$row->barang_no;?></td>
<td width="240px" ><?=$row->barang_name;?></td>
</tr>
<?php $counter++;}} ?>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
after select checkbox i'm using this script : 选择复选框后，我正在使用此脚本：
function getItemsID(supid){
$.ajax({
type: 'post',
url: '<?php echo base_url();?>admin/po_trans_po/getItemsId',
data:'id='+supid,
success: function(data){
$(".itemsGroup").html(data);
$('#myModalItems').modal('hide');
}
});
}
and then this is my PHP file : 然后这是我的PHP文件：
function getItemsId()
{
$id = $this->input->post('id');
$resultBarang = $this->db->query("select * from `st_po_barang` a,st_po_harga_barang c
where c.barang_id = a.barang_id
and now() between c.harga_start_date and c.harga_end_date
and a.barang_id = $id
");
$resultBarang = $resultBarang->row();
echo ' <td> ';
echo ' 1 ';
echo ' </td> ';
echo ' <td width="240px"> ';
echo ' <div class="input-group" >';
echo ' <input type="text" name="barang_id" class="form-control" value="'.$resultBarang->barang_no.'"> ';
echo ' <span class="input-group-addon" id="basic-addon1"> ';
echo ' <a href="#myModalItems" class="trash" role="button" data-toggle="modal"><span class="glyphicon glyphicon-list"></span></a></span> ';
echo ' </div> ';
echo ' </td> ';
echo ' <td> ';
echo ' <input type="text" name="barang_name[]" value="'.$resultBarang->barang_name.'" class="form-control" > ';
echo ' </td> ';
echo ' <td> ';
echo ' <input type="text" name="barang_satuan[]" value="'.$resultBarang->barang_satuan.'"class="form-control" > ';
echo ' </td> ';
echo ' <td> ';
echo ' <input type="text" name="barang_unit_price[]" value="'.$resultBarang->harga_beli.'"class="form-control" > ';
echo ' </td> ';
echo ' <td> ';
echo ' <input type="text" name="barang_qty[]" class="form-control" > ';
echo ' </td> ';
return 1;
//redirect('admin/po_trans_po');
}
If i'm adding row table data , this return data keep in first row in table. 如果我要添加行表数据，则此返回数据将保留在表的第一行中。 How to return data in selected row? 如何返回所选行中的数据？
Regards 问候
2 个解决方案
解决方案1
0 2015-12-21 05:13:36
Use .append to add data in table has class itemsGroup 使用.append在表中具有类itemsGroup的表中添加数据
function getItemsID(supid){
$.ajax({
type: 'post',
url: '<?php echo base_url();?>admin/po_trans_po/getItemsId',
data:'id='+supid,
success: function(data){
$(".itemsGroup").append(data);
$('#myModalItems').modal('hide');
}
});
}
解决方案2
0 2015-12-21 07:30:57
I'm using rowid when user click modals then i change javascript code into : 当用户单击模式时，我正在使用rowid，然后将javascript代码更改为：
function getItemsID(supid){
ptrid = $('#ptrid').val();
$.ajax({
type: 'post',
url: '<?php echo base_url();?>admin/po_trans_po/getItemsId',
data:'id='+supid+'&ptrid='+ptrid,
success: function(data){
$('#'+ptrid).closest("tr").html(data);
$('#myModalItems').modal('hide');
}
});
}
ptrid is rowid that i pass when click modals. ptrid是单击模式时我通过的rowid。 thanks 谢谢
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用AJAX返回数据填充的HTML表的突出显示行 - Highlighting row of a HTML table which is populated using AJAX return data
Onchange使用ajax在表行中追加数据 - Onchange append data in table row using ajax
通过ajax将表行作为HTML代码返回并添加表 - Return table row as a HTML code via ajax and add in table
使用Jquery在html表中追加一行？ - Append a row to an html table with Jquery?
Ajax数据表Codeigniter查询仅返回一行 - Ajax Data table Codeigniter query return only one row
附加数据并显示html表 - Append data and display html table
使用AJAX删除HTML表行 - Remove HTML table row with AJAX
使用Ajax数据通过附加注入html - Injecting html with append using ajax data
将Jquery Ajax“数据”附加为表中的单独值 - Append Jquery Ajax “data” as separate values in a table
jQuery AJAX-将新数据追加到表 - jQuery AJAX - Append new data to table
相关标签