我需要动态更改html / js中表格中的列顺序,您可以告诉我该怎么做吗?
更改表列顺序
IT技术
javascript
jquery
html-table
2021-03-14 09:54:56
4个回答
如果你只需要简单地移动一个列而不需要任何花哨的拖放动画,下面的 JS 应该可以做到:
<script type="text/javascript">
$(function() {
jQuery.each($("table tr"), function() {
$(this).children(":eq(1)").after($(this).children(":eq(0)"));
});
});
</script>
根据需要替换数字。这个概念有效
似乎不可能把它写成单行。在选择器中包含 td,即使行选择器似乎将每个 td保存在单独的索引上,忽略行。
否则,jQuery 网格插件应该可以解决问题。虽然我没有使用此类插件的经验。
移动列并不难:
您可以使用此功能:
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/
这是我刚刚编写的用于切换两列内容的 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() );
});
};
按名称更改列
A | 乙 | C
C | 一个 | 乙
var new_table = [
{
name: "Column C",
index: 0, // actual index
cols: []
},
{
name: "Column A",
index: 0,
cols: []
},
{
name: "Column B",
index: 0,
cols: []
},
]
jQuery.moveColumn = function (table, from, to) {
var list_th = jQuery('th', table);
for (let i = 0; i < Object.keys(list_th).length-2; i++) {
list_th[i];
new_table.find(e => e.name == list_th[i].textContent).index = i
}
console.log("Add actual index", new_table);
var rows = jQuery('tr', table);
var num_rows = Object.keys(rows).length-2
console.log(num_rows);
for (let j = 0; j < num_rows; j++) {
for (let k = 0; k < Object.keys(list_th).length-2; k++) {
new_table.find(e => e.index == k).cols.push(jQuery(rows[j]).children()[k])
}
jQuery(rows[j]).empty("td");
new_table.forEach(e => {
jQuery(rows[j]).append(e.cols[j])
});
}
console.log("Add cols", new_table);
}
var tbl = jQuery('table');
jQuery.moveColumn(tbl);
其它你可能感兴趣的问题