按 ajax php 刪除行

Question

你好我剛學codeigniter，這里我顯示一個數據庫，有幾行。 我用ajax做了一個刪除function，它工作了，但它必須重新加載，所以當我點擊刪除時，數據被刪除並且不必刷新。

      <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. 首先是將 class 添加到包含 ID 的輸入字段。 我使用了 id 輸入

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

2. 然后使用此 ajax 導航輸入字段，並使用該 class 和值來刪除該行。 請參閱我的成功代碼 function；

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");
}
}

---

編輯： use.parent().parent() 因為我們需要引用 tr，而不是 td