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