對 HTML 表格進行排序：逐步指南

Question

我根本不是HTML專家。我對微控制器進行編程並開始切線。我建立了一個html文件來顯示微控制器暫存器、暫存器位址和暫存器描述的表格。我創建了一個包含3列和大約120行的表。有些暫存器位址是位可尋址的-如果它們的位址以0或8結尾。我想突出顯示這些“特殊”寄存器地址-通過將它們顯示為紅色。因此，在暫存器位址以0或8結尾的表格儲存格中，我使用「」和「」將位址值括起來。我的表格有3列：暫存器、位址和說明。

P粉676588738 · Answer

對選定列進行排序的範例程式碼，
這是免費...

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

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