使用一列可排序的表行

Question

我不确定标题是否描述了我的问题。我正在尝试制作可以在线更改数值的表格（使用contenteditable），并且可以排序。我不知道如何将这些功能组合在一起。该HTML看起来像这样：

<table id="sort"> 
    <thead> 
    <tr> 
     <th>#</th> 
     <th>Name</th> 
     <th>Last Name</th> 
     <th>Position</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1</td> 
     <td contenteditable="true">John</td> 
     <td contenteditable="true">Doe</td> 
     <td><img src="images/3-lines.png" /></td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td contenteditable="true">John</td> 
     <td contenteditable="true">Doe</td> 
     <td><img src="images/3-lines.png" /></td> 
    </tr> 
    </tbody> 
</table> 

的JS是这样的：

var fixHelperModified = function(e, tr) { 
    var $originals = tr.children(); 
    var $helper = tr.clone(); 
    $helper.children().each(function(index) { 
     $(this).width($originals.eq(index).width()) 
    }); 
    return $helper; 
}, 
    updateIndex = function(e, ui) { 
     $('td.index', ui.item.parent()).each(function (i) { 
      $(this).html(i + 1); 
     }); 
    }; 

$("#sort tbody").sortable({ 
    helper: fixHelperModified, 
    stop: updateIndex 
}).disableSelection(); 

我想保持CONTENTEDITABLE属性。用户应该能够通过拖拽最右边单元格上的“3-lines.png”图标来对行进行重新排序。

有可能吗？

Answer 1

如果你可以添加一个jQuery插件，使用DataTables，它可以做你想做的，我想。

https://editor.datatables.net/examples/inline-editing/simple