Re-order table columns?

后端 未结 4 867
北荒
北荒 2021-02-03 10:55

Does anyone know a way to re-order table columns, using jQuery?

I don\'t mean sort - I mean dynamically move entire columns left or right in a table.

I\'m aware

相关标签:
4条回答
  • 2021-02-03 11:20

    The idea is to walk over all rows (tr's) of the table and swap the desired td's. Let's swap column 2 and column 4:

    $('table tr').each(function() {
        var tr = $(this);
        var td1 = tr.find('td:eq(1)'); // indices are zero-based here
        var td2 = tr.find('td:eq(3)');
        td1.detach().insertAfter(td2);
    });
    

    I hope this helps.

    0 讨论(0)
  • 2021-02-03 11:33

    I combined it with jQueryUI to get some great drag and drop action:

    (function() {
        var local = {};
        local.containment = 'parent';
        local.revert = true;
        $('body thead th').draggable(local);
        $('body thead th').droppable({
            drop: dropZone
        });
        function dropZone(myEvent, myUI ) {
            var head = {};
    
            head.dragIndex = myUI.draggable.index();
            head.dropIndex = $(this).index();
            head.rows = $(this).closest('thead').find('tr');
            head.cellIndex = head.rows.find('th').length-1;
            head.rows.each(processTableHeaderRows);
    
            function processTableHeaderRows(index, element) {
                var row = {}
    
                row.tr = $(element);
                row.drag = row.tr.find('th:eq(' + head.dragIndex + ')');
                row.drop = row.tr.find('th:eq(' + head.dropIndex + ')');
                if (head.dropIndex === head.cellIndex) {
                    row.drag.detach().insertAfter(row.drop);
                } else {
                    row.drag.detach().insertBefore(row.drop);
                }
            }
            // Same thing here for td instead of th
            $(this).closest('table').find('tbody > tr').each(processRows);
            function processRows(index, element) {
                var row = {};
    
                row.tr = $(element);
                row.drag = row.tr.find('td:eq(' + head.dragIndex + ')');
                row.drop = row.tr.find('td:eq(' + head.dropIndex + ')');
                if (head.dropIndex === head.cellIndex) {
                    row.drag.detach().insertAfter(row.drop);
                } else {
                    row.drag.detach().insertBefore(row.drop);
                }
            }
        }
    })();
    

    Tried to get it to work in jsFiddle, but I couldn't. Works on my website though!

    0 讨论(0)
  • 2021-02-03 11:39

    Reading through the source code of the dragtable plugin, the author mentions that the algorithm for actually moving table columns was born of a discussion on the comp.lang.javascript newsgroup. That discussion is here: Swapping table columns.

    In that thread, the OP is not asking about the UI side of reordering, but help with debugging a function he'd already written to swap two columns. Further down the discussion it develops into code that enables you to pass a specific column ordering, and have the code calculate all the necessary swaps/moves to get from the current ordering to the specified ordering.

    It's not jQuery (most posters on c.l.js have a firm dislike of it and most other JS frameworks), and therefore it's code you can hopefully adapt for your needs and then include anywhere.

    0 讨论(0)
  • 2021-02-03 11:40

    This code should work for you.

    $("table tr").each(function () {
        $(this).find("td").eq(1).after($(this).find("td").eq(0));
    });
    


    Edit: If you assign $(this).find("td") to a variable this would give better performance. But the context was down to a single tr. So i assumed it would be enough just to give the idea.

    $("table tr").each(function () {
        var rows = $(this).find("td");
        rows.eq(1).after(rows.eq(0));
    });
    
    0 讨论(0)
提交回复
热议问题