jqueryを使用していくつかのテーブル行を非表示にする方法について、インポートされたxmlデータに対して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行のみを強制的に表示したい完全なテーブルにデータがインポートされることを除いて、すべてがうまく機能します。
それを行う方法はありますか??
ありがとう