亲宝软件园·资讯

展开

jquery表格行拖动排序

hehuijava 人气:0

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

效果

加载全部内容

相关教程
猜你喜欢
用户评论