Trier les tableaux HTML : un guide étape par étape-Questions et réponses sur le réseau chinois PHP

Je ne suis pas du tout un expert HTML. J'ai programmé le microcontrôleur et j'ai commencé à partir sur des tangentes.

J'ai créé un document HTML pour afficher un tableau des registres de microcontrôleurs, des adresses de registre et des descriptions de registre. J'ai créé un tableau avec 3 colonnes et environ 120 lignes. Certaines adresses de registre sont adressables par bits - si leur adresse se termine par 0 ou 8.

Je souhaite mettre en valeur ces adresses de registre "spéciales" - en les affichant en rouge. Ainsi, dans les cellules du tableau où l'adresse du registre se termine par 0 ou 8, j'utilise "" et "" pour entourer la valeur de l'adresse.

Mon tableau comporte 3 colonnes : registre, adresse et description. Alors une ligne pourrait ressembler à

"Accumulateur ACC 0xE0".

J’ai terminé la table et elle a l’air superbe. Puis il m'est venu à l'esprit que je voulais pouvoir trier le tableau sur n'importe quelle colonne. Par exemple, si je clique sur "Adresse", je souhaite que le tableau s'affiche à nouveau et soit trié selon les valeurs de cette colonne.

J'ai cherché et trouvé un moyen. Comment cela fonctionne, il y a un bouton "Trier" - cliquez dessus et il réaffichera le tri des valeurs de la première colonne. J'en ai implémenté une version simple et je l'ai fait fonctionner. Je l'ai ensuite modifié pour trier la deuxième colonne lorsque l'on clique sur le bouton "Trier".

Cela ne fonctionne pas exactement... à cause de tous ces "" de toute façon.

Exemple que j'ai copié de lui :

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

Y a-t-il quelque chose de « simple » que je peux faire pour utiliser cette méthode – tout en faisant apparaître en rouge certaines entrées dans la colonne « Adresse » ?

Je devrais probablement m'en tenir à la programmation de microcontrôleurs, mais j'aime les défis.

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

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