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