Question

我不知道这是否可能，但我们会看到......

我有一张桌子：

<table cellspacing="0" class="stripey">
            <thead>
                <tr>
                    <td class="center"></td>
                    <td>Plan Name</td>
                    <td class="options">Options</td>
                </tr>
            </thead>
            <tbody>
                <?php 
                foreach ($result as $row) {
                ?>
                <tr class="<?php echo alternator('', 'odd'); ?>" id="record-<?php echo $row['id'];?>">
                    <td class="center"></td>
                    <td><?php echo $row['name']; ?></td>
                    <td class="options"><img src="<?php echo base_url();?>inc/images/search.png"> <img src="<?php echo base_url();?>inc/images/pencil.png"> <a href="#" class="delete" title="delete"><img src="<?php echo base_url();?>inc/images/delete.png"></a></td>
                </tr>
                <?php
                }
                ?>
            </tbody>
        </table>

正如您所看到的，<tr>会重复，但很多人都在$result ...但我有一个图像允许我删除该项目...所以我写道：

$('a.delete').click(function() {
    var parent = $(this).parents("tr:first");
    $.ajax({
        type: 'get',
        url: '/plans/delete',
        data: 'id='+ parent.attr('id').replace('record-', ''),
        beforeSend: function() {
            parent.animate({'backgroundColor':'#fb6c6c'},300);
        },
        success: function(msg) {
            parent.children('td').wrapInner('<div>');
            parent.children('td').children('div').slideUp(500,function() {
            parent.remove();
            $('.stripey tr').removeClass('odd');
            $('.stripey tr:even').addClass('odd');

            });
        }
    });
    return false;       
});

现在我想知道的是，是否有可能以某种方式告诉tr中有多少tbody项，以便如果有0，我可以用文本替换整个表说没有。

Answer 1

您可以使用jQuery dom对象的length属性...

if($('table.stripey tbody tr').length == 0) {
    // do something
}

Answer 2

您可以使用以下行来获取锚click事件处理程序中的总trs数。

var totalNoOfTrs =  $(this).closest("tbody").children().length;

$('a.delete').click(function() {
    var parent = $(this).parents("tr:first");
    var $tr = $(this).closest("tr");
    $.ajax({
        type: 'post',
        url: '/plans/delete',
        data: 'id='+ parent.attr('id').replace('record-', ''),
        beforeSend: function() {
            parent.animate({'backgroundColor':'#fb6c6c'},300);
        },
        success: function(msg) {
            var $tbody = $tr.closest("tbody");
            $tr.remove();
            if($tbody.children().length > 0){
               $('.stripey tr').removeClass('odd');
               $('.stripey tr:even').addClass('odd');
            }
            else{
               //Replace the table with appropriate message.
               $('.stripey').replaceWith("<div>No rows to delete</div>");
            }

        }
    });
    return false;       
});

在上面的代码this中指向class删除且最接近tbody的锚元素将给出包含所有trs然后children()的tbody元素tbody将给出其中的所有tr元素。

Answer 3

您可以查看length的{{1}}的{{1}}：

children

如果最后删除元素

3 个答案: