Stack Overflow en español Asked by user188091 on December 24, 2020
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?
En el click en un th se le añade una clase que le da en este caso color de fondo:
th.classList.add('red');
...
tr.querySelectorAll('td')[column].classList.add('red');
He añadido una clase "celda" a los th y tr para eliminar el background de otras columnas que se hayan podido clickar antes:
$(".celda").removeClass('red');
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
$(".celda").removeClass('red');
th.classList.add('red');
let values = [];
trs.forEach(tr => {
values.push({
trData: tr.dataset.num,
value: tr.querySelectorAll('td')[column].innerText
});
tr.querySelectorAll('td')[column].classList.add('red');
});
// 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);
});
}));
});
});.red { background: red; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="sortable">
<thead>
<tr>
<th class="celda">Col1</th>
<th class="celda">Col2</th>
<th class="celda">Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="celda">a</td>
<td class="celda">b</td>
<td class="celda">c</td>
</tr>
<tr>
<td class="celda">b</td>
<td class="celda">c</td>
<td class="celda">a</td>
</tr>
<tr>
<td class="celda">c</td>
<td class="celda">a</td>
<td class="celda">b</td>
</tr>
</tbody>
</table>Correct answer by Carmen on December 24, 2020
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP