Мне нужно изменить порядок столбцов в таблице в html/js динамически, вы можете сказать мне, как это сделать? Спасибо всем!
Изменить порядок столбцов таблицы
Ответ 1
Если вам требуется просто переместить столбец без какой-либо фантастической анимации перетаскивания, следующий JS должен сделать трюк:
<script type="text/javascript">
$(function() {
jQuery.each($("table tr"), function() {
$(this).children(":eq(1)").after($(this).children(":eq(0)"));
});
});
</script>
Замена чисел при необходимости. Концепция работает
Кажется, что писать это как один лайнер на самом деле невозможно. включая td в селекторе, даже с селектором строк, кажется, удерживает каждый td по отдельному индексу, игнорируя строки.
Плагин сетки jQuery должен делать трюк иначе. Хотя у меня нет опыта работы с такими плагинами.
Ответ 2
Перемещение столбцов не так сложно:
Вы можете использовать эту функцию:
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/
Ответ 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() );
});
};