[英]Add a <tr> element to dynamic table, dynamically without a page refresh, php jquery
I am trying to add a dynamic row to the existing table on click of button, whose rows are dynamically created using output from PHP script. 我试图在单击按钮时向现有表中添加动态行,该行的行是使用PHP脚本的输出动态创建的。
I doing an ajax call to the script insert_tr.php
which returns me a TR element in the same format as the existing table with the data.Data is returned appropriately 我对脚本
insert_tr.php
进行了ajax调用,该脚本以与现有数据表相同的格式返回了TR元素给我,并适当地返回了数据
But unfortunately, the <tr>
row is not being added to the table dynamically but adds only after a page refresh. 但是不幸的是,
<tr>
行不是动态添加到表中,而是仅在页面刷新后才添加。
PHP file code : PHP文件代码:
<div id="v_div">
<table class="table table-bordered table-striped" >
<thead>
<th class='col-md-2'>name</th>
<th class='col-md-2'>number</th>
</thead>
<tbody>
<?php
while ($data = pg_fetch_assoc($ret)) {
echo
"<tr id=tr_".$data['sr_number'].">
<td class='td_topic' id=title:".$data['number']." >".trim($data['name'])."</td>
<td class='td_topic' id=title:".$data['number']." >".trim($data['number'])."</td>
<td class='td_topic' id=title:".$data['number']." ><button class='btn btn-info check1' type=button title='Add Entry'>Add Entry</button></td>
</tr>";
?>
</tbody>
</table>
</div>
Javascript : Javascript:
$(document).ready(function() {
$("#v_div").on('click', '.check1', function() {
var field_userid = $(this).parent().attr("id");
var value = $(this).text();
$.post('insert_tr.php', field_userid + "=" + value, function(data) {
if (data != '') {
$(this).closest("tr").after(data);
}
});
});
});
All I want to do is add the row immediately after the current TR
am on ,dynamically without a page refresh, which serves the ultimate use of an ajax call. 我要做的就是在当前
TR
启用后立即添加行,动态地不刷新页面,这最终可以使用ajax调用。
The reference to this
is not the button that was clicked. 到参考
this
是不被点击的按钮。
$(this).closest("tr").after(data);
Store a reference to the row outside the Ajax call. 存储对Ajax调用之外的行的引用。
$(document).ready(function() {
$("#v_div").on('click', '.check1', function() {
var field_userid = $(this).parent().attr("id");
var value = $(this).text();
var row = $(this).closest("tr");
$.post('insert_tr.php', field_userid + "=" + value, function(data) {
if (data != '') {
row.after(data);
}
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.