通过ajax php删除行

Question

你好，我刚刚学习codeigniter，这里我显示了一个数据库，有几行。我用ajax做了一个删除函数，它很有效，但必须重新加载，这样当我点击删除时，数据就会被删除，而不必刷新。

<tbody id="tbody">
<?php
$no = 1;
foreach ($temporary as $m) { ?>
<tr>
<input type="hidden"  class="form-control" name="id_service" value="<?php echo $m->id_service ?>">
<input type="hidden"  class="form-control" name="id_cs" value="<?php echo $m->id_cs ?>">
<input type="hidden"  class="form-control" name="jenis" value="<?php echo $m->jenis ?>">
<td>
<input type="hidden"  class="form-control" name="id_tmp" value="<?php echo $m->id_tmp ?>">
<input type="text"  class="form-control" name="" value="<?php echo $m->tracking_number ?>">
</td>
<td>
<button type="button" class="btn btn-danger" onclick="deletes(<?php echo $m->id_tmp;?>)">Delete</button>
</td>
</tr>
<?php } ?>
</tbody>

ajax

function deletes(id){
if (confirm("Are you sure?")) {
$.ajax({
url: '<?php echo base_url();?>backend/inbound/del',
type: 'post',
data: {id_tmp:id},
success: function () {
alert('ok');
},
error: function () {
alert('gagal');
}
});
} else {
alert(id + " not deleted");
}
}

Answer 1

使用.closest()获取更多详细信息的另一种方法单击此处

Php代码

<tbody id="tbody">
<?php
$no = 1;
foreach ($temporary as $m) { ?>
<tr class="jsRowDelete">
<input type="hidden"  class="form-control" name="id_service" value="<?php echo $m->id_service ?>">
<input type="hidden"  class="form-control" name="id_cs" value="<?php echo $m->id_cs ?>">
<input type="hidden"  class="form-control" name="jenis" value="<?php echo $m->jenis ?>">
<td>
<input type="hidden"  class="form-control" name="id_tmp" value="<?php echo $m->id_tmp ?>">
<input type="text"  class="form-control" name="" value="<?php echo $m->tracking_number ?>">
</td>
<td>
<button type="button" class="btn btn-danger" onclick="deletes(<?php echo $m->id_tmp;?>,this)">Delete</button>
</td>
</tr>
<?php } ?>
</tbody>

Jquery代码

function deletes(id,oElem) {    
if (confirm("Are you sure?")) {
$.ajax({
url: '<?php echo base_url();?>backend/inbound/del',
type: 'post',
data: {
id_tmp: id
},
success: function() {
//alert('ok');
console.log($(oElem).closest(".jsRowDelete"));
$(oElem).closest(".jsRowDelete").remove();
//or
//$(oElem).closest("tr").remove();
},
error: function() {
alert('gagal');
}
});
} else {
alert(id + " not deleted");
}
}

你可以查看工作示例点击这里

Answer 2

由于您已经提到它是在后端或数据库上删除的，您可以使用jquery删除UI上的那一行。这里有一种不修改标记的方法。

1. 首先是在包含ID的输入字段中添加一个类

<input type="hidden"  class="form-control id-input" name="id_tmp" value="<?php echo $m->id_tmp ?>">

2. 然后使用此ajax浏览具有该类和值的输入字段以删除行。请参阅我的成功函数代码

function deletes(id){
if (confirm("Are you sure?")) {
$.ajax({
url: '<?php echo base_url();?>backend/inbound/del',
type: 'post',
data: {id_tmp:id},
success: function () {
// loop through all input with class id-input
$(".id-input").each(function(){
// if it matches the value delete parent row
if($(this).val() == id){
// delete parent row
$(this).parent().parent().remove();
}
});
},
error: function () {
alert('gagal');
}
});
} else {
alert(id + " not deleted");
}
}

---

编辑：使用.Pparent((.Pparent(，因为我们需要引用tr，而不是td