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

Question

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

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

Fiddle

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>

JS

/* 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));

CSS

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;
}

Answer 1

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

let tableBody = document.querySelector('.divTableBody');
let column = Array.from(
  tableBody.querySelectorAll('.divTableCell:nth-child(2)')
);

对这个元素集合进行排序

let sorted = column.sort((a, b) => a.innerText > b.innerText );

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

sorted.forEach(v => {
  let row = v.parentNode;
  row.remove();
  tableBody.appendChild(row);
});