Question

我有一张看起来像这样的表：

<table>
<tr id="header">
    <th>Title</th>
    <th>Title</th>
</tr>
<tr id="1" class="record">
    <td><a class="delbutton">X</a></td>
    <td>Some Data</td>
</tr>
<tr id="2" class="record">
    <td><a class="delbutton">X</a></td>
    <td>Some Data</td>
</tr>
</table>

我有一个jQuery脚本：

$(function() {
    $(".delbutton").click(function(){

        //Save the link in a variable called element
        var element = $(this);

        //Find the id of the link that was clicked
        var del_id = element.attr("id");

        //Built a url to send
        var info = 'del_id=' + del_id;
        if(confirm("Are you sure you want to delete this entry?  This cannot be undone.")) {
            $.ajax({
                type: "GET",
                    url: "delete_entry.php",
                    data: info,
                    success: function(){
            }
        });

        $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
        .animate({ opacity: "hide" }, "slow");
    }
    return false;
    });
});

我要做的是删除标题行（id =“header”），或者更好的是删除最后一个数据行之后的剩余表格。

任何指导都会很棒

更新：按照汤姆的建议，我试着计算行数。我尝试过：

$('.record').size()

但总是会报告初始行数 - 在删除行之后，它永远不会准确报告行数。是否有可能以某种方式跟踪剩余的行？

解决这很有效：

$(function() {
    $(".delbutton").click(function(){

        //Save the link in a variable called element
        var element = $(this);

        //Find the id of the link that was clicked
        var del_id = element.attr("id");

        //Built a url to send
        var info = 'del_id=' + del_id;
        if(confirm("Are you sure you want to delete this entry?  This cannot be undone.")) {
            $.ajax({
                type: "GET",
                    url: "delete_entry.php",
                    data: info,
                    success: function(){
            }
        });

        $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
        .animate({ opacity: "hide" }, "slow");
                    //Remove - don't just hide                        
                    $(this).parents(".record").remove();

                    //If there are no more deleteable rows, delete the header
        if($('.record').length == 0) {
            $('#existTitle').animate({ backgroundColor: "#fbc7c7" }, "fast").animate({ opacity: "hide" }, "slow");
        }
    }
    return false;
    });
});

Answer 1

您可能希望将动画隐藏在条件

中

if(confirm("Are you sure you want to delete this entry?  This cannot be undone.")) {
  $.ajax({
    type: "GET",
    url: "delete_entry.php",
    data: info,
    success: function() {
      // change this animation to whatever you want
      $(this).parent().animate({ opacity: "hide" }, "slow");
    }
}

这样，只有当用户确认要删除时，该行才会消失。然后，与该动画一起，再做一次检查以查看是否还有行（使用子节点或兄弟节点和.size（））如果没有使用相同的代码隐藏标题行（使用您选择的动画）：

  $("#header").animate({ opacity: "hide" }, "slow");

Answer 2

（先看问题评论）删除的替代方法 - 使用addClass / removeClass - 然后使用/不使用类计算这些行 - 与总数进行比较以查看可见的行数。

$(this).parents(".record").addClass("removedrow");
var removedRowsCount = $('#myTable tr.removedrow').length;

完整性：

$(this).parents(".record").addClass("removedrow").animate({ backgroundColor: "#fbc7c7" }, "fast") 
        .animate({ opacity: "hide" }, "slow"); 
var removedRowsCount = $('#myTable tr.removedrow').length;
if (removedRowsCount < ($('#myTable tr').length -1))
{
   $(this).parents(".header").addClass("removedrow").animate({
        backgroundColor: "#fbc7c7" }, "fast") 
        .animate({ opacity: "hide" }, "slow"); 
};

Answer 3

抓住桌子，我假设你可以用$（this）.parents（“。record”）。parent（“table”），检查child rows it has的数量以及是否为1或者0，删除元素（或淡出）。

删除所有其他行后删除标题行

3 个答案: