我有这样的表:
<table>
<tr class="parent">
<th id="apple">Apple</th>
<th id="orange">Orange</th>
<th>Banana</th>
</tr>
<tr class="parent">
<td>Apple</td>
<td>Orange</td>
<td>Banana</td>
</tr>
<tr class="child">
<td>Apple 1</td>
<td>Orange 1</td>
<td>Banana 1</td>
</tr>
<tr class="child">
<td>Apple 2</td>
<td>Orange 2</td>
<td>Banana 2</td>
</tr>
<tr class="parent">
<td>Table</td>
<td>cHAIR</td>
<td>Mouse</td>
</tr>
<tr class="child">
<td>Table 1</td>
<td>cHAIR 1</td>
<td>Mouse 1</td>
</tr>
<tr class="child">
<td>Table 2</td>
<td>cHAIR 2</td>
<td>Mouse 2</td>
</tr>
</table>
我想只对<th>
上的子行数据进行排序,并将子tr与子tr一起移动。我无法做到这一点,因为它只有一张桌子。
我目前使用的代码是:demo of code
答案 0 :(得分:0)
我想我现在明白你想要什么。我认为您希望通过使用父级对彼此进行排序,并对组内的子项进行排序。
$('th').click(function() {
//remove and group
var groups = [];
$(this).parent().siblings().each(function() {
$(this).detach();
if($(this).hasClass('parent')) {
groups.push({parent:$(this), children:[]});
} else {
groups[groups.length-1].children.push($(this));
}
});
//sort, inter-group, and intra-group
var i = $(this).index();
function compareRows(rowA, rowB) {
var a = $(rowA.children()[i]).text();
var b = $(rowB.children()[i]).text();
return a < b ? -1 : a > b ? 1 : 0;
}
groups.sort(function(groupA, groupB) {
return compareRows(groupA.parent, groupB.parent);
});
$.each(groups, function(_, group) {
group.children.sort(compareRows);
});
//reinsert
var table = $(this).parent().parent();
$.each(groups, function(_, group) {
table.append(group.parent).append(group.children);
});
});
请说明您的意图是否是其他意图。