假设我有这个表:
<table class="table table-striped table-bordered table-condensed">
<tr>
<th><h1>Tracks</td></th>
</tr>
<tr>
<th>Track Id</th>
<th>Artist</th>
<th>Track Name</th>
<th>Uploader</th>
<th>Status</th>
</tr>
<tr>
<td>1</td>
<td>Artist 1</td>
<td>Track Name 1</td>
<td>Uploader 1</td>
<td>Blocked</td>
</tr>
<tr>
<td>2</td>
<td>Artist 2</td>
<td>Track Name 2</td>
<td>Uploader 2</td>
<td>Visible</td>
</tr>
</table>
通过JQuery,如何根据表行的值排列表行?比方说,我想显示只包含表数据值的表行。我该如何通过Jquery做到这一点?
下面是一个例子:
$('#search').on('keyup', function() {
var val = $.trim(this.value).toLowerCase();
$('table > tbody > tr:gt(1)').hide();
if (val.length) {
$('table > tbody > tr:gt(1) > td').filter(function() {
return this.innerHTML.toLowerCase().indexOf(val) >= 0;
}).parent().show();
} else $('table > tbody > tr:gt(1)').show();
});
(这将为您提供一些指导)
演示
相关参考文献:
.gt()
父>子选择器
.filter()
作为变体(DEMO):
HTML
<input id="search" type="text">
<table id="table" class="table table-striped table-bordered table-condensed">
<tr>
<th>Track Id</th>
<th>Artist</th>
<th>Track Name</th>
<th>Uploader</th>
<th>Status</th>
</tr>
<tr>
<td>1</td>
<td>Artist 1</td>
<td>Track Name 1</td>
<td>Uploader 1</td>
<td>Blocked</td>
</tr>
<tr>
<td>2</td>
<td>Artist 2</td>
<td>Track Name 2</td>
<td>Uploader 2</td>
<td>Visible</td>
</tr>
</table>
JavaScript
$(document).ready(function () {
$('#search').keyup(function () {
$('#table tr').show();
var q = $(this).val().toLowerCase();
$('#table tr:not(:first)').each(function () {
var visible = false;
$('td', this).each(function () {
var content = $(this).text().toLowerCase();
if (content.indexOf(q) != -1) visible = true;
});
$(this).toggle(visible);
});
})
});
演示