Cambiar columnas de la tabla orden

Question

Necesito cambiar dinámicamente el orden de las columnas en una tabla en html/js, ¿me puede decir cómo hacerlo? ¡Gracias a todos!

Answer 1

Si sólo necesita simplemente mover una columna sin ningún tipo de animación de arrastrar y soltar de fantasía, la siguiente JS debe hacer el truco:

<script type="text/javascript"> 
    $(function() { 
     jQuery.each($("table tr"), function() { 
      $(this).children(":eq(1)").after($(this).children(":eq(0)")); 
     }); 
    }); 
</script> 

Sustitución de los números como sea necesario. El concepto funciona

Parece que escribir esto como un trazador de líneas no es realmente posible. incluyendo td en el selector, incluso con el selector de filas parece contener cada td en un índice separado, ignorando las filas.

Un plugin de cuadrícula jQuery debería ser el caso. Aunque no tengo experiencia con dichos complementos.

Answer 2

columnas en movimiento no es tan difícil:

Se puede utilizar esta función:

jQuery.moveColumn = function (table, from, to) { 
    var rows = jQuery('tr', table); 
    var cols; 
    rows.each(function() { 
     cols = jQuery(this).children('th, td'); 
     cols.eq(from).detach().insertBefore(cols.eq(to)); 
    }); 
} 

Entonces invocarlo así:

var tbl = jQuery('table'); 
jQuery.moveColumn(tbl, 2, 0); 

Por lo tanto, si se conoce el índice de la columna y el índice del lugar donde desea ubicarlo (basado en cero), puede mover las columnas, incluidos los encabezados de columna.

Aquí es el jsFiddle de trabajo: http://jsfiddle.net/Qsys7/1/

Answer 3

Aquí hay un plugin de jQuery que acabo de escribir para cambiar el contenido de dos columnas:

$.fn.switchColumns = function (col1, col2) { 
    var $this = this, 
     $tr = $this.find('tr'); 

    $tr.each(function(i, ele){ 
     var $ele = $(ele), 
      $td = $ele.find('td'), 
      $tdt; 

     $tdt = $td.eq(col1).clone(); 
     $td.eq(col1).html($td.eq(col2).html()); 
     $td.eq(col2).html($tdt.html()); 
    }); 
}; 

See example →