jquery实现表格行拖动排序

来源：jb51　　时间：2022/2/22 15:52:25　　对本文有异议

本文实例为大家分享了jquery实现表格行拖动排序的具体代码，供大家参考，具体内容如下

引入JS

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>

html代码

<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>sortDemo</title>
? ? <script src="jquery.min.js"></script>
? ? <script src="jquery-ui.min.js"></script>
 
</head>
<body>
 
<table id="dataTable" border="1" cellpadding="6" cellspacing="0" align="center" style="margin-top: 10px;border-color: #dddddd;border-style: solid;">
? ? <thead>
? ? ? ? <tr>
? ? ? ? ? ? <th>序号</th>
? ? ? ? ? ? <th>姓名</th>
? ? ? ? ? ? <th>年龄</th>
? ? ? ? </tr>
? ? </thead>
? ? <tbody>
? ? ? ? <tr>
? ? ? ? ? ? <td>1</td>
? ? ? ? ? ? <td>张三</td>
? ? ? ? ? ? <td>18</td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>2</td>
? ? ? ? ? ? <td>李四</td>
? ? ? ? ? ? <td>25</td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>3</td>
? ? ? ? ? ? <td>王五</td>
? ? ? ? ? ? <td>16</td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>4</td>
? ? ? ? ? ? <td>赵六</td>
? ? ? ? ? ? <td>30</td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>5</td>
? ? ? ? ? ? <td>田七</td>
? ? ? ? ? ? <td>20</td>
? ? ? ? </tr>
? ? </tbody>
</table>
<script type="text/javascript">
? ? $(function() {
? ? ? ? var fixHelper = function(e, ui) {
? ? ? ? ? ? ui.children().each(function() {
? ? ? ? ? ? ? ? $(this).width($(this).width());
? ? ? ? ? ? });
? ? ? ? ? ? return ui;
? ? ? ? };
 
? ? ? ? $("#dataTable tbody").sortable({
? ? ? ? ? ? cursor: "move",
? ? ? ? ? ? helper: fixHelper,
? ? ? ? ? ? axis:"y",
? ? ? ? ? ? start:function(e, ui){
? ? ? ? ? ? ? ? ui.helper.css({"background":"#fff"});
? ? ? ? ? ? ? ? return ui;
? ? ? ? ? ? }
? ? ? ? });
? ? ? ? $( "#sortable" ).disableSelection();
? ? });
 
</script>
</body>
</html>

效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

友情链接：直通硅谷　点职佳　北美留学生论坛

jQuery热门文章

jQuery推荐文章