Necesito cambiar el orden de las columnas en una tabla en html/js de forma dinámica, me pueden decir como hacerlo?
Si solo necesita mover una columna sin ninguna animación elegante de arrastrar y soltar, el siguiente JS debería ser el truco:
<script type="text/javascript"> $(function() { jQuery.each($("table tr"), function() { $(this).children(":eq(1)").after($(this).children(":eq(0)")); }); }); </script>Reemplazando los números según sea necesario. El concepto funciona
Parece que escribir esto en una sola línea no es realmente posible. incluyendo td en el selector, incluso con el selector de fila parece mantener cada td en un índice separado, ignorando las filas.
De lo contrario, un complemento de cuadrícula jQuery debería funcionar. Aunque no tengo experiencia con tales complementos.
Mover columnas no es tan difícil:
Puedes usar 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)); }); }Luego invocalo así:
var tbl = jQuery('table'); jQuery.moveColumn(tbl, 2, 0);Entonces, al conocer el índice de la columna y el índice donde le gustaría colocarlo (basado en cero), puede mover las columnas, incluidos los encabezados de las columnas.
Aquí está el jsfiddle de trabajo: http://jsfiddle.net/Qsys7/1/
Aquí hay un complemento 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() ); }); };