AnswerBun.com

Cuando se ordena por columna en una tabla que esta se cambie de color

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?

One Answer

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

Add your own answers!

Related Questions

Duda sobre form e input

1  Asked on December 30, 2021

     

.htacess no funciona en servidor linux

1  Asked on December 30, 2021

         

Acceder a memoria SD con react native

1  Asked on December 28, 2021 by edwin-v

   

Obtener valores de un TableLayout

1  Asked on December 28, 2021 by jesus-alejandro-nuez-jaimez

     

Acceder al HttpContext.Session en ASP.NET Core

1  Asked on December 28, 2021 by duvan

     

Could not send request Postman

1  Asked on December 28, 2021 by agustin-coronel

 

org.hibernate.QueryException: could not resolve property

1  Asked on December 28, 2021 by dani-cantely

   

curl php comparar resultado

1  Asked on December 28, 2021

 

Leer un .txt con Genexus y obtener datos

0  Asked on December 28, 2021 by federico-moontero

   

Optimizar y crear bucle sql

1  Asked on December 27, 2021 by nacherasg

     

Hacer un registro único en base de datos usando while en Python

2  Asked on December 25, 2021 by rosendo-zarate

 

Error al recargar fragment

2  Asked on December 25, 2021 by esteban-sasso

     

Javascript – Formatear un número en string local a number

3  Asked on December 25, 2021 by leonardo-cavani

 

Crear sub menu con js

1  Asked on December 25, 2021

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP