Mengisih jadual HTML: panduan langkah demi langkah

Question

Saya bukan pakar HTML sama sekali. Saya memprogramkan mikropengawal dan mula menyala pada tangen. Saya telah mencipta dokumen html untuk memaparkan jadual daftar pengawal mikro, alamat daftar, dan penerangan daftar. Saya telah mencipta jadual dengan 3 lajur dan kira-kira 120 baris. Sesetengah alamat daftar boleh dialamatkan sedikit - jika alamatnya berakhir dengan 0 atau 8. Saya ingin menyerlahkan alamat daftar "istimewa" ini - dengan menunjukkannya dengan warna merah. Jadi dalam sel jadual di mana alamat daftar berakhir dengan 0 atau 8, saya menggunakan "" dan "" untuk menyertakan nilai alamat. Jadual saya mempunyai 3 lajur: daftar, alamat dan perihalan.

P粉676588738 · Answer

Contoh kod untuk mengisih lajur yang dipilih,
Ianya PERCUMA...

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

Contoh pengisihan menaik dan menurun:

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