Reorder HTML table rows using drag-and-drop

后端未结

关注

 7  503

無奈伤痛 2021-01-29 23:00

I have a jQuery function to move table rows up and down. I do not know how to save the data, nor get the position of each row. I am using PHP to show the table rows.

How

7条回答

别那么骄傲 (楼主)

2021-01-29 23:36

Easy for plugin jquery TableDnd

$(document).ready(function() {

    // Initialise the first table (as before)
    $("#table-1").tableDnD();

    // Make a nice striped effect on the table
    $("#table-2 tr:even').addClass('alt')");

    // Initialise the second table specifying a dragClass and an onDrop function that will display an alert
    $("#table-2").tableDnD({
        onDragClass: "myDragClass",
        onDrop: function(table, row) {
            var rows = table.tBodies[0].rows;
            var debugStr = "Row dropped was "+row.id+". New order: ";
            for (var i=0; i



Plugin (TableDnD):
https://github.com/isocra/TableDnD/

Demo:
http://jsfiddle.net/DenisHo/dxpLrcd9/embedded/result/

CDN:
https://cdn.jsdelivr.net/jquery.tablednd/0.8/jquery.tablednd.0.8.min.js