Estoy intentando que cuando se ordene la columna es decir cuando se haga click en el thead, la columna entera se cambie de color, para saber cual esta ordenada
y tengo la siguiente funcion de ordenación: he pensado que cuando entre en la línea de ordenar, que cambie toda la columna
La tabla es normal, con sus thead y tbody, el script de ordenacion no discrimina acentos y tiene la clase sortable en el table tag
<script>
document.addEventListener('DOMContentLoaded', () => {
let tables = document.querySelectorAll('.sortable');
tables.forEach(table => {
let tbody = table.querySelector('tbody');
let trs = tbody.querySelectorAll('tr');
if(trs.length == 0) {
// Nada que hacer con esta tabla
return;
}
// Ascendente o descendente
let order, lastColumn;
// Asignar número para poder acceder y mover a ubicación final
trs.forEach((tr, trNum) => tr.dataset.num = trNum);
// Obtener celdas de título para asignar evento y ordenar al hacer clic
let ths = table.querySelectorAll('thead th');
ths.forEach((th, column) => th.addEventListener('click', () => {
// Crear un arreglo con dato de fila y valor de celda
let values = [];
trs.forEach(tr => {
values.push({
trData: tr.dataset.num,
value: tr.querySelectorAll('td')[column].innerText
});
});
// Ordenar valores
values.sort((a,b) => a.value.localeCompare(b.value));
// Definir el orden en que se va a mostrar
if(lastColumn !== column) {
// Si el clic no es en la misma columna que el anterior
// Restablecer orden
order = null;
}
lastColumn = column;
// Definir el orden de salida
if(!order || order == 'DESC') {
// En el primer clic en la misma columna, order es nulo
order = 'ASC'
} else {
order = 'DESC';
}
if(order == 'DESC') {
values.reverse();
}
// Ordenar tabla
values.forEach(data => {
let trMove = table.querySelector(`[data-num="${data.trData}"]`);
tbody.appendChild(trMove);
});
}));
});
});
</script>
Como podría ponerlo para la forma que quiero?