jquery實現(xiàn)表格行拖動排序
更新時間：2022年02月22日 11:35:31 作者：hehuijava
這篇文章主要為大家詳細介紹了jquery實現(xiàn)表格行拖動排序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery實現(xiàn)表格行拖動排序的具體代碼，供大家參考，具體內(nèi)容如下
引入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>效果
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jquery.Jcrop結(jié)合JAVA后臺實現(xiàn)圖片裁剪上傳實例
這篇文章主要介紹了jquery.Jcrop結(jié)合JAVA后臺實現(xiàn)圖片裁剪上傳實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-11-11
基于jquery實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
jQuery實現(xiàn)table表格checkbox全選的方法分析
這篇文章主要介紹了jQuery實現(xiàn)table表格checkbox全選的方法,結(jié)合實例形式分析了jQuery事件響應(yīng)與元素遍歷實現(xiàn)table表格checkbox元素狀態(tài)動態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
input:checkbox多選框?qū)崿F(xiàn)單選效果跟radio一樣
checkbox是多選，怎么才能讓他變成單選，效果跟radio一樣呢，本菜鳥就自己寫了個小程序，代碼很簡單2014-06-06
這篇文章主要為大家詳細介紹了jquery實現(xiàn)圖片切換代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了jQuery基本選擇器之標(biāo)簽名選擇器的相關(guān)資料,本文介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
本篇文章主要是對jquery選擇器之屬性過濾選擇器進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
本文給大家分享的是使用jquery實現(xiàn)表單驗證并阻止非法提交的代碼，思路非常不錯，這里推薦給小伙伴們參考下。2015-07-07
jquery提示效果有很多，本文也提供一個超漂亮的仿騰訊彈出層效果，熱愛特效的你可千萬不要錯過了啊，希望本文提供的案例對你學(xué)習(xí)jquery特效有所幫助2013-02-02
jquery給圖片添加鼠標(biāo)經(jīng)過時的邊框效果
鼠標(biāo)經(jīng)過時圖片產(chǎn)生塌陷，實則應(yīng)該將邊框控制直接加在IMG標(biāo)簽上即可，下面有個不錯的示例，大家可以感受下2013-11-11