如何对 HTML 表格进行排序？

Question

我根本不是 HTML 专家。我对微控制器进行了编程，然后走上了正轨。

我创建了一个 html 文档来显示微控制器寄存器、寄存器地址和寄存器描述的表格。我创建了一个包含 3 列的表 - 大约 120 行。一些寄存器地址是位可寻址的——如果它们的地址以 0 或 8 结尾。

我想突出显示这些“特殊”寄存器地址 - 将它们显示为红色。因此，在寄存器地址以 0 或 8 结尾的表格单元格中，我使用 "" 和 "" 将地址值括起来。

我的表有 3 列，寄存器、地址和描述。然后一行可能看起来像

“ACC 0xE0 累加器”。

我把桌子都弄好了，看起来很棒。然后我想到我希望能够对任何列上的表格进行排序。例如，如果我点击“地址”，我希望表格重新显示并按该列中的值排序。

我搜索并找到了一种方法。它通过一个“排序”按钮来工作——点击它，它会重新显示对第一列值的排序。我实现了它的一个简单版本并让它工作。然后，当单击“排序”按钮时，我将其更改为对第二列进行排序。

那并不完全奏效....因为所有那些“”随便什么。

我从他这里复制的例子：

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table

我可以做些什么“简单”来使用这种方法 - 但仍然可以让地址列中的某些条目显示为红色？

我可能应该坚持对微控制器进行编程，但我喜欢挑战。

Answer 1

对选定列进行排序的示例代码，
这是免费...

const
  myButtonSort  = document.querySelector('#my-button-sort')
, colSelector   = document.querySelector('#sel-col')
, myTable_tBody = document.querySelector('#my-table > tbody')
  ;
myButtonSort.onclick = _ =>
  {
  let col = parseInt(colSelector.value ); 
  [...myTable_tBody.querySelectorAll('tr')]
    .map(row=>({row, str:row.cells[col].textContent }))
    .sort((a,b)=>a.str.localeCompare(b.str))
    .forEach(el=>
      {
      myTable_tBody.appendChild(el.row)
      })
  }

table  {
  border-collapse : collapse;
  margin          : 2em 1em;
  }
td,th  {
  padding    : .2em .8em;
  border     : 1px solid darkblue;
  }
thead {
  background : lightseagreen ;
  }

<select id="sel-col">
  <option value="0">column x</option>
  <option value="1">column y</option>
</select>

<button id="my-button-sort">sort</button>

<table id="my-table">
  <thead>
    <tr> <th>x</th> <th>y</th> </tr>
  </thead>
  <tbody>
    <tr> <td>aa</td><td> 1 </td></tr>
    <tr> <td>zz</td><td> 2 </td></tr>
    <tr> <td>ee</td><td> 3 </td></tr>
    <tr> <td>cc</td><td> 4 </td></tr>
  </tbody>
</table>

Answer 2

这可能会让你开始：

const table = document.getElementById("test"),
      th = test.querySelectorAll("th"),
      sortDefault = 0, //default sorted column number
      orderDefault = 0; //default order: 0 = ascending, 1 = descending

table.dataset.sort = sortDefault;
table.dataset.order = orderDefault;

/* add click listeners on table headers */
for(let i = 0; i < th.length; i++)
{
  th[i].addEventListener("click", e =>
  {
    /* if this column was sorted, change it's order */
    if (+table.dataset.sort == e.target.cellIndex)
      table.dataset.order = +table.dataset.order ? 0 : 1;

    /* tell table which column is currently sorted */
    table.dataset.sort = e.target.cellIndex;

    sortColumn();
  });
}

populateTable(); //fill table with random data
sortColumn(); //initial sort of the table

function sortColumn()
{
  const rows = Array.from(table.children);
  rows.splice(0, 1); //remove header from the list
  rows.sort((a, b) => 
  {
    a = a.children[table.dataset.sort].textContent;
    b = b.children[table.dataset.sort].textContent;

    a = a.replace(/\W/g, ""); //remove non alphanumerical characters
    b = b.replace(/\W/g, ""); //remove non alphanumerical characters

    a = a.replace(/0x[a-fA-F0-9]+/, n => Number(n)); //convert 0xHEX to decimal
    b = b.replace(/0x[a-fA-F0-9]+/, n => Number(n)); //convert 0xHEX to decimal

    return a.localeCompare(b, undefined, {numeric: true, sensitivity: 'base'})
  });

  if (+table.dataset.order)
    rows.reverse();

  for(let i = 0; i < rows.length; i++)
  {
    table.appendChild(rows[i]);
  }
}


function populateTable()
{
  for(let i = 0, _tr = document.createElement("tr"), _td = document.createElement("td"); i < 10; i++)
  {
    const tr = _tr.cloneNode(true);
    let td = _td.cloneNode(true);
    td.textContent = "reg " + rand(0, 199);
    tr.appendChild(td);

    td = _td.cloneNode(true);
    td.textContent = "address 0x" + rand(0, 255).toString(16);
    if (rand(0,1))
      td.textContent = td.textContent.replace(/ (.*)/, ' "$1"');
    tr.appendChild(td);

    td = _td.cloneNode(true);
    td.textContent = "desc " + rand(0, 99999).toString(16);
    tr.appendChild(td);
    table.appendChild(tr);
  }
  function rand(min, max)
  {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
}

#test
{
  border-collapse: collapse;
}
#test tr td
{
  border: 1px solid black;
}
#test td
{
  padding: 0.5em 1em;
}
#test th
{
  user-select: none;
  cursor: pointer;
}
#test th:after
{
  visibility: hidden;
}
#test[data-order="0"] th:after
{
  content: "▲";
}
#test[data-order="1"] th:after
{
  content: "▼";
}
#test[data-sort="0"] th:nth-child(1):after,
#test[data-sort="1"] th:nth-child(2):after,
#test[data-sort="2"] th:nth-child(3):after
{
  visibility: visible;
}

<table id="test">
  <tr>
    <th>Register</th>
    <th>Address</th>
    <th>Description</th>
  </tr>
</table>