[英]Arranging The html Tables using Jquery
Lets say I have this table: 可以说我有这张桌子:
<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>
Through JQuery how would arrange the table rows depending on their value? 通过JQuery如何根据值来排列表行? lets say I want to show table rows that only contains a table data value.
假设我想显示只包含表数据值的表行。 How would I do that through Jquery?
我怎么通过Jquery做到这一点?
Here is an example: 这是一个例子:
$('#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();
});
( this will give you some guideline ) (这会给你一些指导)
Related refs: 相关参考:
As a variant ( DEMO ): 作为变体( DEMO ):
HTML 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 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);
});
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.