Question

我正在尝试使用 ajax 调用删除 codeigniter 中的记录。删除功能正常工作我的问题是删除后隐藏行。我在视图中使用引导数据表

<script>
  function remove_cart(itemid) {
    event.preventDefault();
    alert("Delete you really want to delete?");
    var id = $(this).attr('id');
    var btn = this;
    alert(btn);
    $.ajax({
      type: 'POST',
      url: '<?php echo site_url("admin/careers/delete/' + itemid + '")?>',
      data: {
        id: itemid
      },
      success: function(Success) {
        $(btn).closest('tr').fadeOut("fast");

      }
    });
  }
</script>

查看

<a onclick="remove_cart('<?php echo $info['id']; ?>')" id="id">test</a>

表

<table id="example1" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Post applied</th>
            <th>Phone</th>
            <th>Resume</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($jobs as $info) {?>
        <tr>
            <td>
                <?php echo $info['fname'];?> </td>
            <td>
                <?php echo $info['post_applied'];?> </td>
            <td>
                <?php echo $info['phone'];?> </td>
            <td><a href="http://abravmsd.com/uploads/<?php echo $info['resume'];?>" target="_blank">Download</a> </td>
            <td>
                <a href="<?php echo base_url();?>admin/careers/delete/<?php echo $info['id']; ?>" class="delete">Delete</a>
                <a onclick="remove_cart('<?php echo $info['id']; ?>')" id="id">test</a>
            </td>
        </tr>
        <?php  } ?>
    </tbody>
    <tfoot>
    </tfoot>
</table>

Answer 1

this在函数上下文中可能有点棘手。查看MDN documentation for this

对于您的问题，remove_cart是内联侦听器，在调用时，this设置为window（全局对象）。

要点击当前元素，其中一种方法可能是：

var btn = event.target;

这是一个演示：

（为简单起见，我正在用ajax取代setTimeout来电并在某些地方进行硬编码）

function remove_cart(itemid) {
  event.preventDefault();
  var btn = event.target;
  setTimeout(function() {
    $(btn)
      .closest("p")
      .fadeOut("fast");
  }, 100);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This will be fade out after some time... <a href="" onclick="remove_cart('123')" id="id">test</a></p>

另一种方法是使用jQuery的.on('click')方法或js'addEventListener方法绑定事件处理程序。这些都可以在网上轻松获得。看看他们！

Answer 2

你试过这个吗？

$(btn).closest('tr').hide();

Answer 3

您需要识别已删除的表格行，因此您应该为其添加id =“ID”，例如使用您的信息['id']：

foreach ($jobs as $info) { ?>
    <tr id="info_row<?= info['id'] ?>">
        <td><?php echo $info['fname'];?> </td>
        <td><?php echo $info['post_applied'];?> </td>
        <td><?php echo $info['phone'];?> </td>
        <td><a href="http://abravmsd.com/uploads/<?php echo $info['resume'];?>" target="_blank">Download</a> </td>
        <td>
            <a href="<?php echo base_url();?>admin/careers/delete/<?php echo $info['id']; ?>" class="delete">Delete</a>
            <a onclick="remove_cart('<?php echo $info['id']; ?>')" id="id">test</a>
        </td>
    </tr>
}

然后在ajax调用中更改你的成功函数：

$('#info_row' + itemid).fadeOut(300, function() { $(this).remove(); });

它使用添加的表行id淡出它，隐藏后它将从dom中删除该行。

只是一个通知：你应该删除remove_cart链接上的id =“id”;页面上只有一个具有给定id的元素。如果这个样式链接以某种方式将其更改为class =“id”

通过codeigniter中的ajax删除后隐藏数据表的行（tr）

3 个答案: