欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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í)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論