我有以下表格设置：
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}<table>
<thead>
<tr>
<th>System Name</th>
<th>TotalSystemGB</th>
<th>Drive</th>
<th>Total GB</th>
<th>Used GB</th>
<th>Free GB</th>
</tr>
</thead>
<tbody>
<tr class="mainRow">
<td>System 1</td>
<td>1100</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="subRow">
<td> System 1</td>
<td></td>
<td>C:</td>
<td>100</td>
<td>50</td>
<td>50</td>
</tr>
<tr class="subRow">
<td> System 1</td>
<td></td>
<td>D:</td>
<td>1000</td>
<td>750</td>
<td>250</td>
</tr>
<tr class="mainRow">
<td>System 2</td>
<td>820</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="subRow">
<td> System 2</td>
<td></td>
<td>C:</td>
<td>120</td>
<td>70</td>
<td>50</td>
</tr>
<tr class="subRow">
<td> System 2</td>
<td></td>
<td>D:</td>
<td>700</td>
<td>500</td>
<td>200</td>
</tr>
<tr class="mainRow">
<td>System 3</td>
<td>3080</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="subRow">
<td> System 3</td>
<td></td>
<td>C:</td>
<td>80</td>
<td>30</td>
<td>50</td>
</tr>
<tr class="subRow">
<td> System 3</td>
<td></td>
<td>D:</td>
<td>1000</td>
<td>750</td>
<td>250</td>
</tr>
<tr class="subRow">
<td> System 3</td>
<td></td>
<td>E:</td>
<td>2000</td>
<td>1500</td>
<td>500</td>
</tr>
</tbody
</table>
我希望有以下行为：
我目前使用的是sortable，但我没有看到让它以我想要的方式运行的方法，特别是在保持subRows连接到mainRows方面。
有解决这个问题的聪明方法吗？
答案 0 :(得分：2)
要对主行进行排序，您需要找到mainRows及其相应的子行，然后基本上将它们附加到适当的位置。
对于子行，您还需要找到mainRows，但只能在相应的mainRow之后附加它们。
var last_column;
function get_mains()
{
var mains = document.querySelectorAll(".mainRow");
var mains_array = []
mains.forEach( item => mains_array.push(item) );
return mains_array;
}
function order_mains(column)
{
var mains_array = get_mains();
var table = document.getElementById("body");
mains_array.sort( function (a, b) {
let a_text = a.querySelectorAll("td")[column].innerText;
let b_text = b.querySelectorAll("td")[column].innerText;
let truthy;
if (column)
{
return +a_text < +b_text;
}
else
{
return a_text.localeCompare(b_text);
}
});
if (last_column === column)
{
mains_array.reverse();
}
for (let item of mains_array)
{
var siblings = [];
var sibling = item.nextElementSibling;
table.appendChild(item);
do
{
if (sibling.className === "mainRow")
{
break;
}
siblings.push(sibling);
}
while ( sibling = sibling.nextElementSibling);
for (let sib of siblings)
{
table.appendChild(sib);
}
}
last_column = (last_column === column) ? -1 : column;
}
function order_subs(column)
{
var mains_array = get_mains();
var tbody = document.getElementById("body");
for (let item of mains_array)
{
var siblings = [];
var sibling = item.nextElementSibling;
do
{
if (sibling.className === "mainRow")
{
break;
}
siblings.push(sibling);
}
while ( sibling = sibling.nextElementSibling);
siblings.sort( function (a, b) {
let a_text = a.querySelectorAll("td")[column].innerText;
let b_text = b.querySelectorAll("td")[column].innerText;
return +a_text < +b_text;
});
if (last_column === column)
{
siblings.reverse();
}
for (let sib of siblings)
{
body.insertBefore(sib, item.nextElementSibling);
}
}
last_column = (last_column === column) ? -1 : column;
}table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}<table id="the_table">
<thead>
<tr>
<th onclick="order_mains(0)">System Name</th>
<th onclick="order_mains(1)">TotalSystemGB</th>
<th>Drive</th>
<th onclick="order_subs(3)">Total GB</th>
<th onclick="order_subs(4)">Used GB</th>
<th onclick="order_subs(5)">Free GB</th>
</tr>
</thead>
<tbody id="body">
<tr class="mainRow">
<td>System 1</td>
<td>1100</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="subRow">
<td> System 1</td>
<td></td>
<td>C:</td>
<td>100</td>
<td>50</td>
<td>50</td>
</tr>
<tr class="subRow">
<td> System 1</td>
<td></td>
<td>D:</td>
<td>1000</td>
<td>750</td>
<td>250</td>
</tr>
<tr class="mainRow">
<td>System 3</td>
<td>820</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="subRow">
<td> System 3</td>
<td></td>
<td>C:</td>
<td>120</td>
<td>70</td>
<td>50</td>
</tr>
<tr class="subRow">
<td> System 3</td>
<td></td>
<td>D:</td>
<td>700</td>
<td>500</td>
<td>200</td>
</tr>
<tr class="mainRow">
<td>System 2</td>
<td>3080</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="subRow">
<td> System 2</td>
<td></td>
<td>C:</td>
<td>80</td>
<td>30</td>
<td>50</td>
</tr>
<tr class="subRow">
<td> System 2</td>
<td></td>
<td>D:</td>
<td>1000</td>
<td>750</td>
<td>250</td>
</tr>
<tr class="subRow">
<td> System 2</td>
<td></td>
<td>E:</td>
<td>2000</td>
<td>1500</td>
<td>500</td>
</tr>
</tbody>
</table>