javascript - jQuery，动态显示表格行

Question

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

类似于:

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

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

$("#data tr").reveal(num_rows) (???)

});

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

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

Answer 1

正如 kennis 回答的那样，使用 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

您可以将此函数绑定(bind)到 <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);
});

请告诉我这是否是您的想法......