Javascript jQuery，动态显示表行

使用值为10、20、30的选择表单字段，如何在更改下拉列表时显示/隐藏表中的tr行数

比如：

$rows.changefunction{

var num_rows=$this.val

$data tr.revealnum_行

})

编辑：应从表的底部开始添加/删除行

---

滑动显示/隐藏效果会很好。

我认为这应该行得通

$("#rows").change(function(){

    var num_rows = $(this).val();

    $("#data tr").slice(num_rows).hide();

});

---

正如kennis所回答的，使用jQuery的切片方法

我总结了一个工作示例，您可以在这里尝试：

HTML标记：

使用此函数，您可以通过以下示例控制mytable中的行数：

show(); // show all rows
show(1, 10); // show rows 1 - 10
show(1, 20); // show rows 1 - 20
show(3, 7); // show rows 3 - 7
show(20); // show rows 20 and up

您可以将此函数绑定到类似以下内容的更改：

HTML:

---

让我知道这是否是你的想法…

因此，我需要休息一下，所以我决定把这些放在一起，希望我正确地阅读了你的问题；：

$(document).ready(function(){
    $('#rows').change(function(){
        if($('#tbl tr').length !== parseInt($(this).val()))
        {
            (u = function(){
                if($('#tbl tr').length < parseInt($('#rows').val()))
                {
                    var id = $('#tbl tr').length;
                    var e = $('#tbl').append('<tr style="display: none;" id="'+id+'"><td>foo</td></tr>');
                    $('#'+id).fadeIn('fast', function(){
                        if($('#tbl tr').length < parseInt($('#rows').val())) u();
                    });
                }
                else if($('#tbl tr').length > parseInt($('#rows').val()))
                {
                    var id = $('#tbl tr').length-1;
                    $('#tbl #'+id).fadeOut('fast', function(){
                        $(this).remove();
                        if($('#tbl tr').length >= parseInt($('#rows').val())) u();
                    });
                }
            })();
        }
    });
});

使用此功能，您可以通过漂亮的小尾巴调用淡入淡出来显示/隐藏表中任意数量的行

当然，这是很快黑客一起，有各种各样的优化，可以做

---

您使用的是什么xhtml标记？可以使用任何必要的标记，现在我只有一个带有table、tbody、tr和td标记的xhtml有效表。没有thead。每个单元格内都有一个img或span。我可以对class属性中的行进行编号，这可能会有所帮助。很显然，我的解决方案之前有一个bug，chrome修复了刚才在ff中发现的，所以请尝试一下：谢谢编辑，David。这是我的第一篇文章，我不知道格式。干杯

show(); // show all rows
show(1, 10); // show rows 1 - 10
show(1, 20); // show rows 1 - 20
show(3, 7); // show rows 3 - 7
show(20); // show rows 20 and up

<select id="limit">
    <option value="0">None</option>
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
    <option value="" selected>All</option>
</select>

$('#limit').bind('change', function () {
    show(0, this.value);
});

$(document).ready(function(){
    $('#rows').change(function(){
        if($('#tbl tr').length !== parseInt($(this).val()))
        {
            (u = function(){
                if($('#tbl tr').length < parseInt($('#rows').val()))
                {
                    var id = $('#tbl tr').length;
                    var e = $('#tbl').append('<tr style="display: none;" id="'+id+'"><td>foo</td></tr>');
                    $('#'+id).fadeIn('fast', function(){
                        if($('#tbl tr').length < parseInt($('#rows').val())) u();
                    });
                }
                else if($('#tbl tr').length > parseInt($('#rows').val()))
                {
                    var id = $('#tbl tr').length-1;
                    $('#tbl #'+id).fadeOut('fast', function(){
                        $(this).remove();
                        if($('#tbl tr').length >= parseInt($('#rows').val())) u();
                    });
                }
            })();
        }
    });
});