jQuery，動態顯示錶格行

Question

使用值爲「10」，「20」，「30」的選擇表單字段，如何顯示/隱藏下拉變化表中的tr行數？

喜歡的東西：

$（ 「＃行」）變更（函數（）{

VAR NUM_ROWS = $（本）.VAL（）;

$（」。 #data tr「）。reveal（num_rows）（???）

}）;

編輯：行應該從表的底部開始添加/刪除。

滑動顯示/隱藏效果會很好。

Answer 1

我認爲這應該工作。

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

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

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

}); 

Answer 2

正如肯尼斯回答的那樣，使用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;  
} 

使用此功能您可以控制中的行數通過這些例子：

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