強迫表中的前5行用jquery顯示

Question

我寫了一個問題show hide jquery table rows for imported xml data關於如何使用jquery顯示隱藏某些錶行，現在使用相同的問題，我想知道如何強制前5個元素出現。我曾經在我的例子下面的代碼：

$(document).ready(function(){ 
$.ajax({ 
    type: "GET", 
    url: "test.xml", 
    dataType: "xml", 
    success: function(xml) { 
    $(xml).find('event').each(function(){  
    var Col0 = $(this).find('title').text(); 
    var Col1 = $(this).find('country').text(); 
    var Col2 = $(this).find('date').text(); 
    var Col3 = $(this).find('time').text(); 
    var Col4 = $(this).find('course').text(); 
    var Col5 = $(this).find('topic').text(); 
    var Col6 = $(this).find('pre-course').text(); 
    $('<tr></tr>').html('<th>'+Col0+'</th><td>'+Col1+'</td><td>'+Col2+'</td><td>'+Col3+'</td><td>'+Col4+'</td><td>'+Col5+'</td><td>'+Col6+'</td>').appendTo('#test'); 
initalizeTable(); 
}); 
    } 
}); 
}); 

和HTML：

<table id="test"> 
     <tr><td></td><th>country</th> 
     <th>Date</th><th>time</th> 
     <th>course</th><th>topic</th> 
      <th>pre-course</th></tr> 
    </table> 

然後我用JavaScript來只顯示某些顯示選項：

function initalizeTable() { 
function show (min, max) { 
    var $table = $('#test'), $rows = $table.find('tbody tr'); 
    min = min ? min - 1 : 0; 
    max = max ? max : $rows.length; 
    $rows.hide().slice(min, max).show(); 
    return false;  
} 

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

我不得不換上面的代碼將其包含在第一個代碼中，以便在數據導入到html後直接加載它。

，這裏是我用來手動更改顯示選項的HTML：

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

現在一切都很正常，只是數據在全臺進口的，我想強制只顯示前5行在桌子裏。

任何想法該怎麼做？

感謝

Answer 1

你可以在你的initalizeTable()函數的末尾調用show(0,5);。

或觸發您選擇的change事件綁定它只是後，使其自動拾取從下拉的當前選擇的選項的最大值：

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