Sortieren von HTML-Tabellen: eine Schritt-für-Schritt-Anleitung

Question

Ich bin überhaupt kein HTML-Experte. Ich habe den Mikrocontroller programmiert und angefangen, Tangenten zu berechnen.

Ich habe ein HTML-Dokument erstellt, um eine Tabelle mit Mikrocontroller-Registern, Registeradressen und Registerbeschreibungen anzuzeigen. Ich habe eine Tabelle mit 3 Spalten und etwa 120 Zeilen erstellt. Einige Registeradressen sind bitadressierbar – wenn ihre Adresse mit 0 oder 8 endet.

Ich möchte diese „besonderen“ Registeradressen hervorheben – indem ich sie rot zeige. In den Tabellenzellen, in denen die Registeradresse mit 0 oder 8 endet, verwende ich „“ und „“, um den Adresswert zu umgeben.

Meine Tabelle hat 3 Spalten: Register, Adresse und Beschreibung. Dann könnte eine Zeile so aussehen:

„ACC 0xE0 Akkumulator“.

Ich habe den Tisch fertig und er sieht großartig aus. Dann kam mir der Gedanke, dass ich die Tabelle nach jeder beliebigen Spalte sortieren wollte. Wenn ich beispielsweise auf „Adresse“ klicke, möchte ich, dass die Tabelle erneut angezeigt und nach den Werten in dieser Spalte sortiert wird.

Ich habe einen Weg gesucht und gefunden. Die Funktionsweise besteht darin, dass es eine Schaltfläche „Sortieren“ gibt. Klicken Sie darauf und die Sortierung der ersten Spaltenwerte wird erneut angezeigt. Ich habe eine einfache Version davon implementiert und zum Laufen gebracht. Ich habe es dann geändert, um die zweite Spalte zu sortieren, wenn auf die Schaltfläche „Sortieren“ geklickt wird.

Das funktioniert nicht unbedingt ... wegen all dieser „“s sowieso.

Beispiel, das ich von ihm abgeschaut habe:

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

Kann ich etwas „Einfaches“ tun, um diese Methode zu verwenden – aber dennoch dafür zu sorgen, dass einige Einträge in der Spalte „Adresse“ rot angezeigt werden?

Ich sollte wahrscheinlich bei der Programmierung von Mikrocontrollern bleiben, aber ich mag Herausforderungen.

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 : '\25B2'; }
th[data-order=desc]::after { content : '\25BC'; }
th[data-order=none]::after { content : '\25B2'; color:transparent; }  /* get the same width */