tablas - Manipular una tabla HTML(para reordenamiento de columna, visibilidad) usando jQuery/JavaScript?

tablas dinamicas html javascript

Question

Tengo un sitio ASP.NET MVC y tengo una tabla HTML en una vista. Según el código html de ejemplo, a veces tengo tablas anidadas dentro de las celdas, pero eso puede ignorarse hasta que llegue al final de la pregunta.

<table id="mainTable">
      <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
      </tr>
      </thead>
      <tbody>
      <tr>
          <td>data</td>
          <td>data</td>
          <td>data</td>
      </tr>
      <tr>
          <td>data</td>
          <td>
               <table class="nestedTable">
                   <tr><th>Col 1</th><th>Col 3</th></tr>
                   <tr>
                       <td>nested data</td><td>nested data 1</td>
                    </tr>
               </table>
          </td>
          <td>data</td>
      </tr>
    </tbody>
</table>

Ahora quiero utilizar este plugin jQuery multiselect para permitir al usuario seleccionar el orden de las columnas que quieren, así como mostrar / ocultar ciertas columnas. Por lo tanto, estoy creando un multiselect que se parece a esto:

<select id="cols" class="multiselect" multiple="multiple" name="cols[]">
    <option value="Col1">Col1</option>
    <option value="Col2">Col2</option>
    <option value="Col3">Col3</option>
</select>

para permitir que el usuario elija el pedido y luego voy a almacenar estos datos en el almacenamiento local por el momento. Entonces, todo lo que estoy almacenando es una matriz de cadenas que representan el "orden visible de las columnas" que se usa para configurar el selector multiselect. Esto funciona bien y puedo mantener esta matriz o "nombres de columna ordenados".

Mi pregunta es: ¿cuál es la mejor manera de tomar este conjunto de cadenas y actualizar la tabla HTML para reflejar el orden de estas columnas y la visibilidad de las columnas?

Sé que hay marcos de cuadrícula de tabla html más grandes que tienen esta característica, pero en este caso necesito seguir con una tabla html codificada a mano.

Actualizar:

La respuesta de @Rick Hitchcock a continuación me dio el 90% del camino, pero hay un problema abierto que me parece que complica un poco mi pregunta. En ciertos casos, tengo una tabla anidada dentro de la tabla principal. He actualizado la pregunta para incluir esta situación. NO quiero que el código del selector de columnas afecte a la tabla anidada, así que estoy buscando una forma de que el código afecte a la tabla principal.

Answer 1

^{[respuesta original eliminada en base a la pregunta actualizada]}

Dada una matriz ( arr ) como esta:

[''Col 2'', ''Col 3'', ''Col 1'']

… o esto:

[''Col 1'', ''Col 3'']

... esto ordenará que las columnas de la tabla principal coincidan y ocultará las columnas no utilizadas:

var tr= $(''#mainTable > tbody > tr, #mainTable > thead > tr'');

$(''> th, > td'', tr).hide();

$.each(arr, function(_, val) {
  var col=  $(''> th'', tr)
              .filter(function() {
                return $(this).text()===val;
              })
              .index();

  $(tr).append(function() {
    return $(''> td, > th'', this).eq(col).show();
  });
});

Violín

Haga clic en un botón para reordenar la tabla.

Cómo funciona

Esto limitará los selectores posteriores a las filas de la tabla principal:

var tr= $(''#mainTable > tbody > tr, #mainTable > thead > tr'');

Incluso si excluye tbody , se agregará para usted . Por esta razón, esta siempre es una colección vacía: $(''#mainTable > tr'') .

Esto oculta solo los hijos directos de la colección tr (de la línea anterior):

$(''> th, > td'', tr).hide();

Como efecto secundario, todos los descendientes también estarán ocultos.

Es el equivalente de:

$(tr).children(''th, td'').hide();

Los métodos de find y find de children de jQuery a menudo son innecesarios (y costosos), cuando puedes lograr lo mismo usando selectores de CSS, especialmente teniendo en cuenta las ventajas del parámetro de context opcional:

$( selector [, context ] )

Esto observa cada elemento de la matriz:

$.each(arr, function(_, val) { ... }); Esto obtiene el index() del elemento th (que es un elemento secundario directo de la colección tr ), en el que su text() coincide con el valor de la matriz:

var col=  $(''> th'', tr)
              .filter(function() {
                return $(this).text()===val;
              })
              .index();

Esa es la columna que queremos mostrar.

Finalmente, esto agrega a cada miembro de la colección tr todos sus hijos con ese número de columna, y los muestra:

$(tr).append(function() {
  return $(''> td, > th'', this).eq(col).show();
});

El método append() jQuery (como el método appendChild() JavaScript) mueve un elemento, ya sea al DOM o a otro lugar dentro del DOM.

Sabiendo esto, a menudo podemos evitar el uso de métodos como detach() .