jquery实现表格行拖动排序

2022-04-17 03:36:54 来源：易采站长站作者：

本文实例为大家分享了jquehttps://www.easck.com/ry实现表格行拖动排序的具体代码，供大家参考，具体内容如下

引入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<SJgoBHdFy/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>

效果

jquery实现表格行拖动排序