JS / HTML如何使用固定的子行对表进行排序 [英] JS/HTML how to sort table with fixed subrows
问题描述
我有以下表格设置：
table {border-collapse：collapse;} table，th，td {border：1px solid black;}
<表> < THEAD> < TR> < th>系统名称< / th> <的第i; TotalSystemGB< /第> <的第i;驱动和LT; /第>总GB /秒< th>使用的GB< / th> < th>免费GB< / th> < / TR> < / THEAD> < TBODY> < tr class =mainRow> < td>系统1< / td> < TD> 1100< / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < / TR> < tr class =subRow> < td>& nbsp;& nbsp;& nbsp;系统1< / td> < TD>< / TD> < TD> C：< / TD> < TD> 100℃; / TD> < TD> 50℃; / TD> < TD> 50℃; / TD> < / TR> < tr class =subRow> < td>& nbsp;& nbsp;& nbsp;系统1< / td> < TD>< / TD> < TD> d：其中; / TD> < TD> 1000℃; / TD> < TD> 750℃; / TD> < TD> 250℃; / TD> < / TR> < tr class =mainRow> < td>系统2< / td> < TD> 820< / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < / TR> < tr class =subRow> < td>& nbsp;& nbsp;& nbsp;系统2< / td> < TD>< / TD> < TD> C：< / TD> < TD> 120℃; / TD> < TD> 70℃; / TD> < TD> 50℃; / TD> < / TR> < tr class =subRow> < td>& nbsp;& nbsp;& nbsp;系统2< / td> < TD>< / TD> < TD> d：其中; / TD> < TD> 700℃; / TD> < TD> 500℃; / TD> < TD> 200℃; / TD> < / TR> < tr class =mainRow> < td>系统3< / td> < TD> 3080< / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < / TR> < tr class =subRow> < td>& nbsp;& nbsp;& nbsp;系统3< / td> < TD>< / TD> < TD> C：< / TD> < TD> 80℃; / TD> < TD> 30℃; / TD> < TD> 50℃; / TD> < / TR> < tr class =subRow> < td>& nbsp;& nbsp;& nbsp;系统3< / td> < TD>< / TD> < TD> d：其中; / TD> < TD> 1000℃; / TD> < TD> 750℃; / TD> < TD> 250℃; / TD> < / TR> < tr class =subRow> < td>& nbsp;& nbsp;& nbsp;系统3< / td> < TD>< / TD> < TD> E：< / TD> < TD> 2000< / TD> < TD> 1500< / TD> < TD> 500℃; / TD> < / TR> < / tbody< / table>
我希望拥有以下行为： 我目前使用排序，但我没有看到一种方法让它以我想要的方式工作，特别是在保持子行连接到mainRows方面。 有没有一种巧妙的方法可以解决这个问题？ 要对主要行进行排序，您需要找到mainRows及其相应的子行， p> 对于子行，您还需要查找mainRows，但只能在它们相应的mainRow之后追加它们。 I have the following table setup:
I would like to have the following behaviour: I currently use sortable but I don't see a way to make it work in the way I want it to, especially in regards of keeping the subRows attached to the mainRows. Is there a clever way to solve this? To sort the main rows, you will need to find the mainRows and their corresponding subRows then basically append them appropriate. For sub rows, you will also need to find the mainRows but then only append them AFTER their corresponding mainRow.
这篇关于JS / HTML如何使用固定的子行对表进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
$ b $在排序完整，已用或空闲的GB时，subRows只会在mainRows中排序。 b
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列）{return + a_text< + b_text;} else {return a_text.localeCompare（b_text）;}}）; if（last_column === column）{mains_array.reverse（）; }（让项目的mains_array）{var siblings = []; var sibling = item.nextElementSibling; table.appendChild（项目）;做{if（sibling.className ===mainRow）{break; } siblings.push（兄弟姐妹）; } while（sibling = sibling.nextElementSibling）; for（let sib of siblings）{table.appendChild（sib）; }} last_column =（last_column ===列）？ -1：column;} function order_subs（column）{var mains_array = get_mains（）; var tbody = document.getElementById（body）; for（let mains_array）{var siblings = []; var sibling = item.nextElementSibling;做{if（sibling.className ===mainRow）{break; } siblings.push（兄弟姐妹）; } 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 ===列）？ -1：column;} table {border-collapse：折叠;} table，th，td {border：1px solid black;}
< table id =the_table> < THEAD> < TR> < th onclick =order_mains（0）>系统名称< / th> < th onclick =order_mains（1）> TotalSystemGB< / th> <的第i;驱动和LT; /第> < th onclick =order_subs（3）> Total GB< / th> < th onclick =order_subs（4）>使用GB< / th> < th onclick =order_subs（5）> Free GB< / th> < / TR> < / THEAD> < tbody id =body> < tr class =mainRow> < td>系统1< / td> < TD> 1100< / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < / TR> < tr class =subRow> < td>& nbsp;& nbsp;& nbsp;系统1< / td> < TD>< / TD> < TD> C：< / TD> < TD> 100℃; / TD> < TD> 50℃; / TD> < TD> 50℃; / TD> < / TR> < tr class =subRow> < td>& nbsp;& nbsp;& nbsp;系统1< / td> < TD>< / TD> < TD> d：其中; / TD> < TD> 1000℃; / TD> < TD> 750℃; / TD> < TD> 250℃; / TD> < / TR> < tr class =mainRow> < td>系统3< / td> < TD> 820< / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < / TR> < tr class =subRow> < td>& nbsp;& nbsp;& nbsp;系统3< / td> < TD>< / TD> < TD> C：< / TD> < TD> 120℃; / TD> < TD> 70℃; / TD> < TD> 50℃; / TD> < / TR> < tr class =subRow> < td>& nbsp;& nbsp;& nbsp;系统3< / td> < TD>< / TD> < TD> d：其中; / TD> < TD> 700℃; / TD> < TD> 500℃; / TD> < TD> 200℃; / TD> < / TR> < tr class =mainRow> < td>系统2< / td> < TD> 3080< / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < / TR> < tr class =subRow> < td>& nbsp;& nbsp;& nbsp;系统2< / td> < TD>< / TD> < TD> C：< / TD> < TD> 80℃; / TD> < TD> 30℃; / TD> < TD> 50℃; / TD> < / TR> < tr class =subRow> < td>& nbsp;& nbsp;& nbsp;系统2< / td> < TD>< / TD> < TD> d：其中; / TD> < TD> 1000℃; / TD> < TD> 750℃; / TD> < TD> 250℃; / TD> < / TR> < tr class =subRow> < td>& nbsp;& nbsp;& nbsp;系统2< / td> < TD>< / TD> < TD> E：< / TD> < TD> 2000< / TD> < TD> 1500< / TD> < TD> 500℃; / TD> < / TR> < / tbody>< / table> 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>
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>
