Javascript 使用Div作为表，如何按特定列进行排序？

我正在从一个带有“DIV TABLES”格式的报告中获取一个HTML文档，在呈现给用户之前，我需要重新格式化它的布局并添加更多的数据

我有下面的Div，我想按特定的“列”（仅JS）对其进行排序，我如何调整JS代码才能做到这一点？我试图避免解析HTML提取数据并重新编码为表，目前我只是获取整个HTML并添加/注入一些小的修改

HTML

<div class="divTable blueTable">
  <div class="divTableHeading">
    <div class="divTableRow">
      <div class="divTableHead">col2</div>
      <div class="divTableHead">col1</div>
      <div class="divTableHead">col4</div>
      <div class="divTableHead">col3</div>
    </div>
  </div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">bcell5_1</div>
      <div class="divTableCell">acell2_1</div>
      <div class="divTableCell">cell1_1</div>
      <div class="divTableCell">cell4_1</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">cell1_2</div>
      <div class="divTableCell">cell4_2</div>
      <div class="divTableCell">cell3_2</div>
      <div class="divTableCell">cell2_2</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">cell1_3</div>
      <div class="divTableCell">cell2_3</div>
      <div class="divTableCell">cell3_3</div>
      <div class="divTableCell">cell4_3</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">cell1_4</div>
      <div class="divTableCell">cell2_4</div>
      <div class="divTableCell">cell3_4</div>
      <div class="divTableCell">cell4_4</div>
    </div>
  </div>
</div>
<div class="blueTable outerTableFooter">
  <div class="tableFootStyle">
    <div class="links"><a href="#">&laquo;</a> <a class="active" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">&raquo;</a></div>
  </div>
</div>

CSS

/* sorts div 'table', but only works when you have a single column. otherwise it sorts the columns instead of the rows*/

var list = document.querySelector('.divTableRow');

[...list.children]
.sort((a,b)=>a.innerText>b.innerText ? 1:-1)
.forEach(node=>list.appendChild(node));

div.blueTable {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.divTable.blueTable .divTableCell,
.divTable.blueTable .divTableHead {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}

.divTable.blueTable .divTableBody .divTableCell {
  font-size: 13px;
}

.divTable.blueTable .divTableRow:nth-child(even) {
  background: #D0E4F5;
}

.divTable.blueTable .divTableHeading {
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
}

.divTable.blueTable .divTableHeading .divTableHead {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
}

.divTable.blueTable .divTableHeading .divTableHead:first-child {
  border-left: none;
}

.blueTable .tableFootStyle {
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  background: #D0E4F5;
  background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  border-top: 2px solid #444444;
}

.blueTable .tableFootStyle {
  font-size: 14px;
}

.blueTable .tableFootStyle .links {
  text-align: right;
}

.blueTable .tableFootStyle .links a {
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}

.blueTable.outerTableFooter {
  border-top: none;
}

.blueTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px;
}

/* DivTable.com */
.divTable {
  display: table;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  display: table-cell;
}

.divTableHeading {
  display: table-header-group;
}

.divTableFoot {
  display: table-footer-group;
}

.divTableBody {
  display: table-row-group;
}

---

获取列的单元格以及稍后需要的一些信息

let tableBody=document.querySelector（'.divTableBody'）；
让column=Array.from(
tableBody.querySelectorAll（'.divTableCell:第n个子项（2'））
);

对元素集合进行排序

let sorted=column.sort（（a，b）=>a.innerText>b.innerText）；

拉动匹配行并按顺序重新插入

sorted.forEach（v=>{
设row=v.parentNode；
row.remove（）；
tableBody.appendChild（行）；
});

将表格数据放入

div

s对可访问性有很大影响。请考虑使用一个真正的表格，这样屏幕阅读器有一个更容易的时间解析这个DATAI，如果你试图在任何规模下使用这个数据，你就在一个受伤害的世界里。这个文档来自一个我无法控制的服务器，这就是为什么我要抓取HTML并试图调整它的原因。我正试图避免解析HTML以获取数据并重新创建表。谢谢，具体回答了我的问题，您获取列数据的部分正是我所需要的，我知道即使在我解释我没有创建原始文档时，也会有一个不使用divs的注释，其中需要表。