更改表列顺序

IT技术 javascript jquery html-table
2021-03-14 09:54:56

我需要动态更改html / js中表格中的列顺序,您可以告诉我该怎么做吗?

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 网格插件应该可以解决问题。虽然我没有使用此类插件的经验。

什么是纯 javascript 中的等效代码
2021-04-22 09:54:56
这还不错,请注意,如果有合并的单元格(即:rowspan > 1),它将无法工作
2021-04-26 09:54:56
嗯..不敲这个答案,但为什么正确答案的开关?我会给我的可重用性优势。
2021-05-04 09:54:56
我对这个做了一个小改动,而不是在孩子中使用选择器,例如链接 .eq(1) 更容易。这使得传递参数更容易:)
2021-05-05 09:54:56

移动列并不难:

您可以使用此功能:

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/

修改您的代码以允许将列移动到最后一列。参见:jsfiddle.net/fyq9em36
2021-04-28 09:54:56
作为其他解决方案,可能就足够了,但它不适用于合并的单元格(即 rowspan > 1)
2021-04-29 09:54:56
试过了,当我尝试执行 tbl,0,6(将第一列移到最后一个位置)时不起作用。相反,我必须做 1,0 => 2,1 => 3,2 ... 6,5 将第一列放在最后一个花边
2021-05-01 09:54:56

这是我刚刚编写的用于切换两列内容的 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() );
    });
};

参见示例 →

试过这个,它实际上只切换单元格的内容而不是列本身。如果您有 td 元素对其中包含的内容很重要,这将不起作用。如果您没有这些要求,则概念可行。
2021-05-10 09:54:56
有用的答案+1。为我工作
2021-05-12 09:54:56
如果列上有width属性或其他样式属性,移动列的内容就不是那么聪明了。你最终会得到更窄的宽列,反之亦然。
2021-05-18 09:54:56

按名称更改列
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);

例子:http : //jsfiddle.net/hw3nmeqb/