Mengisih jadual HTML: panduan langkah demi langkah

Question

Saya bukan pakar HTML sama sekali. Saya memprogramkan mikropengawal dan mula menyala pada tangen.

Saya mencipta dokumen html untuk memaparkan jadual daftar pengawal mikro, alamat pendaftaran dan penerangan pendaftaran. Saya 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 mengelilingi nilai alamat.

Jadual saya mempunyai 3 lajur: daftar, alamat dan penerangan. Kemudian garisan mungkin kelihatan seperti

"ACC 0xE0 Accumulator".

Saya telah menyiapkan meja dan ia kelihatan hebat. Kemudian saya terfikir bahawa saya mahu boleh mengisih jadual pada mana-mana lajur. Sebagai contoh, jika saya mengklik "Alamat" saya mahu jadual dipaparkan semula dan diisih mengikut nilai dalam lajur itu.

Saya mencari dan menemui jalan. Cara ia berfungsi ialah terdapat butang "Isih" - klik itu dan ia akan memaparkan semula pengisihan nilai lajur pertama. Saya melaksanakan versi mudahnya dan menjadikannya berfungsi. Saya kemudian menukarnya untuk mengisih lajur kedua apabila butang "Isih" diklik.

Ini tidak betul-betul berfungsi...kerana semua "" itu pula.

Contoh yang saya tiru daripada beliau:

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

Adakah sesuatu yang "mudah" boleh saya lakukan untuk menggunakan kaedah ini - tetapi masih membuat beberapa entri dalam lajur "Alamat" kelihatan merah?

Saya mungkin perlu berpegang kepada pengaturcaraan mikropengawal, tetapi saya sukakan cabaran.

Answer 1

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

  column x
  column y


sort

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