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

  column x
  column y


sort


  

    
 
x
 
y
 
  
  

    
 
aa
 1 
    
 
zz
 2 
    
 
ee
 3 
    
 
cc
 4 
  

升序和降序排序示例：

const myArray = 
  [ { worth: '100',  name: 'jessca', reason: 'money', email: 'j@gmail.com',  number: '4456',  instagram: 'hvg_ujh', tiktok: 'hhgh.thg' } 
  , { worth: '265',  name: 'e',      reason: 'money', email: 'e@gmail.com',  number: '3456',  instagram: 'hvg_ujh', tiktok: 'hhgh.thg' } 
  , { worth: '6000', name: 'ssica',  reason: 'sex',   email: 's@gmail.com',  number: '0456',  instagram: 'hvg_ujh', tiktok: 'hhgh.thg' } 
  , { worth: '855',  name: 'sica',   reason: 'sex',   email: 'ss@gmail.com', number: '9456',  instagram: 'hvg_ujh', tiktok: 'hhgh.thg' } 
  , { worth: '8679', name: 'ica',    reason: 'sex',   email: 'i@gmail.com',  number: '0756',  instagram: 'hvg_ujh', tiktok: 'hhgh.thg' } 
  , { worth: '1',    name: 'ca',     reason: 'money', email: 'c@gmail.com',  number: '14856', instagram: 'hvg_ujh', tiktok: 'hhgh.thg' } 
  ] 
const
  t_Head      = document.querySelector('#myTable thead')
, t_Head_THs  = document.querySelectorAll('#myTable thead tr th')
, th_list     = [...t_Head_THs].map( TH => TH.dataset.column)
, t_Body      = document.querySelector('#myTable tbody')
, sortOrder   = [ 'none' ,'asc', 'desc' ]
, sortType    = { worth: 'num', name:'str', reason:'str', email:'str', number:'num', instagram:'str', tiktok:'str' }
, sortProcess =
  { 'asc:num'  : (a,b) => +a.str - +b.str
  , 'desc:num' : (a,b) => +b.str - +a.str
  , 'asc:str'  : (a,b) => a.str.localeCompare(b.str)
  , 'desc:str' : (a,b) => b.str.localeCompare(a.str)
  };
myArray.forEach( row =>
  {
  let TR = t_Body.insertRow()
  for (col of th_list)
    TR.insertCell().textContent = row[col] 
  })
t_Head.onclick = ({target}) =>
  {
  if (!target.matches('th')) return
  
  let
    dataOrder = sortOrder[(sortOrder.indexOf(target.dataset.order) +1 )% sortOrder.length]
  , dataType  = sortType[target.dataset.column]
    ;
  t_Head_THs.forEach( TH => { TH.dataset.order = (TH===target) ? dataOrder : 'none' })

  if (dataOrder !== 'none')
    {
    [...t_Body.querySelectorAll('tr')]
    .map     ( row => ({row, str:row.cells[target.cellIndex].textContent }))
    .sort    ( sortProcess[`${dataOrder}:${dataType}`])
    .forEach ( elm => t_Body.appendChild(elm.row ))
    }
  }

body { 
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
table {
  border-collapse  : separate;
  border-spacing   : 1px;
  background-color : darkblue;
  margin           : 1em; 
  }
th, td {
  border     : none;
  background : whitesmoke;
  padding    : .3em .4em;
  }
th {
  background-color : #76ced1;
  white-space      : nowrap;
  cursor           : pointer;
  }
th::before {
  content        : attr(data-column) ' ';
  text-transform : capitalize;
  }
th[data-order=asc]::after  { content : 'B2'; }
th[data-order=desc]::after { content : 'BC'; }
th[data-order=none]::after { content : 'B2'; color:transparent; }  /* get the same width */