![](/img/trans.png)
[英]how to sort 1000 of rows of html table using jquery or javascript fast
[英]Sort only few rows of table - jquery/ javascript
我只想排序子tr的数据,而不想移动父tr。 只有孩子tr会移动到下一个父母。 我有这样一张桌子:
<table>
<tr>
<th id="column1">Column 1</th>
<th id="column2">Column 2</th>
<th>Column 3</th>
</tr>
<tr class="parent">
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr class="child">
<td>96</td>
<td>102</td>
<td>121</td>
</tr>
<tr class="child">
<td>455</td>
<td>422</td>
<td>410</td>
</tr>
<tr class="child">
<td>212</td>
<td>430</td>
<td>203</td>
</tr>
<tr class="parent">
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr class="child">
<td>363</td>
<td>581</td>
<td>231</td>
</tr>
<tr class="child">
<td>632</td>
<td>115</td>
<td>212</td>
</tr>
</table>
JavaScript代码:
$('#column1, #column2')
.each(function(){
var th = $(this),
thIndex = th.index(),
inverse = false;
th.click(function() {
// sorting classes don't work here b/c this function gets called repeatedly - moved to afterRequest: function
table.find('tr.parent td').filter(function(){
return $(this).index() === thIndex;
}).sortElements(function(a, b){
return $.text([a]) > $.text([b]) ?
inverse ? 1 : -1
: inverse ? -1 : 1;
}, function(){
// parentNode is the element we want to move
return this.parentNode;
// this.parentNode
});
inverse = !inverse;
});
});
小提琴: 演示
将每个“部分”用自己的<tbody />
包装
<tbody>
<tr class="parent"><!-- ... --></tr>
<tr class="child"><!-- ... --></tr>
<tr class="child"><!-- ... --></tr>
<tr class="child"><!-- ... --></tr>
</tbody>
<tbody>
<tr class="parent"><!-- ... --></tr>
<tr class="child"><!-- ... --></tr>
<tr class="child"><!-- ... --></tr>
</tbody>
<!-- ... -->
然后对每个<tbody />
的排序
$("tbody").each(function() {
$(this).find('tr:not(.parent) td') // ignore the "parent" row
.filter(function () {
return $(this).index() === thIndex;
}).sortElements(function (a, b) {
return $(a).text() > $(b).text() ? inverse ? -1 : 1 : inverse ? 1 : -1;
}, function () {
return this.parentNode;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.