Question

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

类似的东西：

$（ “＃行”）。变化（函数（）{

var num_rows = $（this）.val（）;

$（“＃data tr”）。reveal（num_rows）（???）

}）;

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

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

Answer 1

正如肯尼斯回答的那样，使用jQuery的slice()方法。

我已经汇总了一个可以在这里尝试的工作示例：http://jsfiddle.net/a9TQ5/

HTML标记：

<table id="mytable">
    <tbody>
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
        <tr><td>3</td></tr>
        ...
    </tbody>
</table>

Javascript代码：

function show (min, max) {
    var $table = $('#mytable'), // the table we are using
         $rows = $table.find('tbody tr'); // the rows we want to select
    min = min ? min - 1 : 0;
    max = max ? max : $rows.length;
    $rows.hide().slice(min, max).show(); // hide all rows, then show only the range we want
    return false;    
}

使用此功能，您可以使用以下示例控制#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

您可以将此功能绑定到<select>上的更改，如下所示：

<强> HTML：

<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>

<强>使用Javascript：

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

如果这是您的想法，请告诉我......

Answer 2

我认为这应该有用。

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

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

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

});

Answer 3

所以，我需要休息一下，所以我决定把它放在一起（希望我能正确地读出你的问题;））：

$(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();
                    });
                }
            })();
        }
    });
});

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

当然，这很快被黑客入侵，并且可以进行各种优化。

<强> Fiddle sample here

jQuery，动态显示表行

3 个答案: