javascript - 你如何使用 jquery sortable 对所有表格行中的表格单元格进行排序?

标签 javascript jquery jquery-ui

我想制作一个可排序的表格并使用 jquery sortable 我可以对表格中的行或行中的单元格进行排序,但我不能在行之间移动单元格。 我该怎么做?

例如。 在这里:http://jsfiddle.net/dado_eyad/mKaFe/2/

我想将 Second row: 2 移动到 First row: 1 的位置

最佳答案

我有一个 CSS 技巧来让可排序的表格单元格
就像可排序的网格示例:
https://jqueryui.com/sortable/#display-grid

Javascript 部分很简单:

$('table').sortable({
    items: 'td', 
});

重点是利用 CSS display 属性。

当您将单元格从 row2 拖到 row1 时,
row1 会变成 4 个单元格,row2 只剩下 2 个单元格,
宽度将缩小以匹配表格宽度。

如果我们在样式表中使用 tr display: inline;
td 显示为 inline-block
布局渲染的行为更像是一个内联 block 列表。
忽略tr的限制。

有关现场演示,请参阅下面的 fiddle :
http://jsfiddle.net/elin/4Q6Qn/

关于javascript - 你如何使用 jquery sortable 对所有表格行中的表格单元格进行排序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10895625/

相关文章:

javascript - 使用 ajax 调用加载替换数据后清理先前的元素

javascript - 单击菜单时超链接问题不重定向到另一个网页

javascript - 将json数据从jquery传递到flask

javascript - 在将 html 添加到另一个列表后,将 html 添加到无序列表中的列表项

javascript - 为什么其他地方显示的 Bootstrap 输入会立即消失?

javascript - 我如何使用构造函数来编写这段代码?

javascript - 使用 "where()"时,在 AngularFirestore 中查询集合导致没有数据

javascript - jQuery 和触摸/移动 : Perform Function on Swipe Left/Right

javascript - jquery 克隆不创建唯一对象

javascript - Jquery 检测 EditorTemplate 上的 TextBox 内容更改