Изменить порядок столбцов таблицы

Question

Мне нужно динамически изменить порядок столбцов в таблице в html / js, вы можете сказать мне, как это сделать?

Answer 1

Перемещение столбцов не так сложно:

Вы можете использовать эту функцию:

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

Тогда вызовите это так:

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

Итак, зная индекс столбца и индекс того места, куда вы хотите его поместить (начиная с нуля), вы можете перемещать столбцы, включая заголовки столбцов.

Вот рабочий jsfiddle: http://jsfiddle.net/Qsys7/1/

Answer 2

Если вам требуется просто переместить столбец без какой-либо причудливой анимации с перетаскиванием, следующий JS должен выполнить трюк:

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

Замена чисел по мере необходимости.Концепция работает

Кажется, что написать это как один лайнер не реально.включение td в селектор, даже если селектор строк, кажется, удерживает каждый td в отдельном индексе, игнорируя строки.

Плагин сетки jQuery должен действовать иначе.Хотя у меня нет опыта работы с такими плагинами.

Answer 3

Вот плагин jQuery, который я только что написал для переключения содержимого двух столбцов:

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

См. Пример & # x2192;