我不确定标题是否描述了我的问题。我正在尝试制作可以在线更改数值的表格(使用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”图标来对行进行重新排序。
有可能吗?
你可以使用任何插件吗? –