Question

我正在尝试检测表中是否还有行，一旦不存在，我将显示警告。以下代码似乎不起作用，任何想法？（表格标题将留下一行，这就是我使用索引1的原因）

$('.remove_row').live('click', function() {

    //If there are no rows left in table, display alert
    if ( $(this).parent().parent().parent().children('tr:eq(1)').length == 0) {

        alert("no rows left");

    }

    $(this).parent().parent().remove();

});

编辑：我在警报之前尝试了删除，并且每次删除行时都会触发。

再次编辑：得到它，需要制作索引2，因为它是在最终实际从DOM中删除之前检查的。

Answer 1

if ( $(this).closest("tbody").find("tr").length === 0 ) {
    alert("no rows left");
}

这会找到所单击元素的cloest父tbody（DOM中始终存在tbody）。它会检查所述tr中tbody个元素的长度。如果它等于0，它将显示警报。

Answer 2

如果您使用的是早于1.7的jQuery，请使用.live()（或.on()），而不是使用.delegate()：

//bind to the `click` event for all `.remove_row` elements that are in the DOM or will be in the future that have the ancestor `#table-id` element
$('#table-id').on('click', '.remove_row', function () {

    var $TRs = $(this).parents('table:first').find('tr');

    //find the number of rows in the table in which the clicked `.remove_row` element is located
    if ( $TRs.length < 2) {

        alert("no rows left");

    } else {

        $TRs.eq(0).fadeOut(500, function () {

            $(this).remove();

        });

    }

});

以下是演示：http://jsfiddle.net/UbUbM/

使用.delegate()事件绑定将如下所示：

$('#table-id').delegate('.remove_row', 'click', function () {

这将使用您的表作为根元素而不是document元素。这也假设当代码运行时表将在DOM中。

ya的一些文档：

.on()：http://api.jquery.com/on
.delegate()：http://api.jquery.com/delegate
.live()：http://api.jquery.com/live（请注意顶部关于.live()被弃用的说明）

jQuery：检测表中是否没有行

2 个答案: