Changer l'ordre des colonnes de la table

J'ai besoin de changer l'ordre des colonnes dans un tableau en html /js dynamiquement, vous pouvez me dire comment faire?

  • modification des colonnes est difficile, la modification de lignes est facile
  • Utiliser une table de plugin. plugins.jquery.com/projects/plugins/tables
  • Vous devriez donner plus de détails ici. Espérez-vous pour permettre aux utilisateurs de glisser et déposer l'ordre des colonnes? Le degré de souplesse dont vous avez besoin de cet être?
InformationsquelleAutor Frayx | 2011-03-28
  1. 29

    Si vous n'avez besoin que de simplement déplacer une colonne, sans aucune fantaisie de glisser-déplacer de l'animation, de la suite de JS devrait faire l'affaire:

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

    En remplaçant les chiffres nécessaires. Le concept fonctionne

    Il semble que la rédaction de ce comme un liner n'est pas vraiment possible. y compris td dans le sélecteur, même avec le sélecteur de ligne semble tenir chaque td sur un index séparé, en ignorant les lignes.

    JQuery grille plugin devrait faire l'affaire autrement. Bien que je n'ai aucune expérience avec ces plugins.

    • Hmm.. pas de frapper cette réponse, mais pourquoi le commutateur de bonne réponse? Je donnerais le mien le bord de la ré-utilisabilité.
    • ce n'est pas mauvais, juste être conscient que cela ne marchera pas si il y a des cellules fusionnées (ie: rowspan > 1)
    • J'ai fait une petite modification à celui-ci, plutôt que de l'aide d'un sélecteur dans les enfants, il est beaucoup plus facile de chaîne .eq(1) par exemple. Cela rend plus facile à passer en arguments 🙂
    • Ce sera l'équivalent de code dans la plaine du javascript pour ce
    InformationsquelleAutor Mig
  2. 32

    Déplacement de colonnes n'est pas difficile:

    Vous pouvez utiliser cette fonction:

    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));
    });
}

    Puis de l'appeler comme ceci:

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

    De sorte que, sachant que l'index de la colonne, et l'indice de l'endroit où vous souhaitez le mettre (de base zéro), vous pouvez déplacer les colonnes, y compris les en-têtes de colonne.

    Ici est le travail jsfiddle: http://jsfiddle.net/Qsys7/1/

    • comme d'autres solutions, peut être suffisant, mais il ne fonctionne pas avec des cellules fusionnées (c'est à dire rowspan > 1)
    • Il a essayé, ne marche pas quand j'essaie de faire un connaissement direct,0,6 (déplacer la première colonne à la dernière place). Au lieu de cela je suis obligé de faire 1,0 => 2,1 => 3,2 ... 6,5 pour mettre la première colonne à la lastp dentelle
    • Modifié votre code pour permettre de déplacer les colonnes de la dernière colonne. Voir: jsfiddle.net/fyq9em36
    InformationsquelleAutor typeof
  3. 3

    Voici un plugin jQuery que je viens d'écrire pour changer le contenu de deux colonnes:

    $.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() );
    });
};

    Voir l'exemple →

    • Essayé cela, il fait seulement des interrupteurs le contenu des cellules de ne pas les colonnes elles-mêmes. Cela ne fonctionne pas si vous avez le td éléments sont importants pour les contenus. Concept fonctionne bien que si vous n'avez pas à ces exigences.
    • Déplacer le contenu des colonnes n'est pas si intelligent, si vous avez width propriété ou à un autre style de propriétés sur les colonnes. Vous avez juste à la fin avec la grande-colonne étant beaucoup plus restreint, et vice-versa.
    • Réponse utile +1. Le travail pour moi
    InformationsquelleAutor mVChr