jquery實(shí)現(xiàn)表格行拖動(dòng)排序
本文實(shí)例為大家分享了jquery實(shí)現(xiàn)表格行拖動(dòng)排序的具體代碼,供大家參考,具體內(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í)有所幫助,也希望大家多多支持腳本之家。
- jQuery-ui插件sortable實(shí)現(xiàn)自由拖動(dòng)排序
- 針對后臺列表table拖拽比較實(shí)用的jquery拖動(dòng)排序
- jQuery拖動(dòng)元素并對元素進(jìn)行重新排序
- jQuery仿360導(dǎo)航頁圖標(biāo)拖動(dòng)排序效果代碼分享
- jquery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)排序Li或Table
- jquery對元素拖動(dòng)排序示例
- 基于JQuery的列表拖動(dòng)排序?qū)崿F(xiàn)代碼
- jQuery實(shí)現(xiàn)移動(dòng)端懸浮拖動(dòng)效果
- jQuery實(shí)現(xiàn)的簡單對話框拖動(dòng)功能示例
- jquery+css實(shí)現(xiàn)移動(dòng)端元素拖動(dòng)排序
相關(guān)文章
jQuery實(shí)現(xiàn)簡單的計(jì)時(shí)器功能實(shí)例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單的計(jì)時(shí)器功能,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)倒計(jì)時(shí)60秒的具體操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-08-08
jQuery實(shí)現(xiàn)TAB選項(xiàng)卡切換特效簡單演示
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)TAB選項(xiàng)卡切換特效簡單演示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03
使用jQuery的toggle()方法對HTML標(biāo)簽進(jìn)行顯示、隱藏的方法(示例)
本文通過示例給大家介紹了使用jQuery的toggle()方法對HTML標(biāo)簽進(jìn)行顯示、隱藏操作的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09
運(yùn)用jquery實(shí)現(xiàn)table單雙行不同顯示并能單行選中
(該方法是對《運(yùn)用jquery實(shí)現(xiàn)(table)單雙行不同顯示并能多行選中》的改進(jìn),適合于單行選擇)2009-07-07
jquery validate.js表單驗(yàn)證入門實(shí)例(附源碼)
這篇文章主要介紹了jquery validate.js表單驗(yàn)證入門實(shí)例,為大家提供了jquery validate.js表單驗(yàn)證的源碼,特別適合初學(xué)者學(xué)習(xí)validate.js表單驗(yàn)證,感興趣的小伙伴們可以參考一下2015-11-11
treepanel動(dòng)態(tài)加載數(shù)據(jù)實(shí)現(xiàn)代碼
本文介紹一個(gè)treepanel動(dòng)態(tài)加載數(shù)據(jù)的例子,需要了解的朋友可以參考下2012-12-12

