Andrewei's Blog
0%

利用 jquery.tablednd 插件实现表格拖动排序

发表于 更新于 分类于 ，

对表格进行拖动排序，自动编号等都可以通过 JS 来实现，tableDnd 是一个可以实现表格拖动排序的插件。

为页面导入JS

1
2
<script src="./js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="./js/jquery.tablednd.js" type="text/javascript"></script>

建立 Table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<table id = "table-1" border="1">
    <tr>
        <td>行号</td>
        <td>学号</td>
        <td>姓名</td>
        <td>成绩</td>
    </tr>
    <tbody id="bbsTab">
    <tr >
        <td></td>
        <td>2015001</td>
        <td>小明</td>
        <td>90</td>
    </tr>
    <tr >
        <td></td>
        <td>2015002</td>
        <td>小红</td>
        <td>95</td>
    </tr>
    <tr >
        <td></td>
        <td>2015003</td>
        <td>小华</td>
        <td>88</td>
    </tr>
    <tr >
        <td></td>
        <td>2015004</td>
        <td>小刚</td>
        <td>92</td>
    </tr>
    <tr >
        <td></td>
        <td>2015005</td>
        <td>小丽</td>
        <td>100</td>
    </tr>
    <tr >
        <td></td>
        <td>2015006</td>
        <td>小蓝</td>
        <td>85</td>
    </tr>
    </tbody>
</table>

插入页面加载时自动编号JS代码

1
2
3
4
5
6
7
8
<script language="javascript" type="text/javascript">
window.onload = function(){
    var oTable = document.getElementById("bbsTab");
    for(var i=0;i<oTable.rows.length;i++){
        oTable.rows[i].cells[0].innerHTML = (i+1);
    }
};
</script>

插入每次拖动和拖动后编号更新 JS 代码

1
2
3
4
5
<script type="text/javascript">
$(document).ready(function() {
     $("#table-1").tableDnD({});
});
</script>

完整的页面例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<script src="./js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="./js/jquery.tablednd.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
window.onload = function(){
    var oTable = document.getElementById("bbsTab");
    for(var i=0;i<oTable.rows.length;i++){
        oTable.rows[i].cells[0].innerHTML = (i+1);
    }
};
</script>
<script type="text/javascript">
$(document).ready(function() {
        $("#table-1").tableDnD({});
        });
</script>
</head>
<body>
<table id = "table-1" border="1">
    <tr>
        <td>行号</td>
        <td>学号</td>
        <td>姓名</td>
        <td>成绩</td>
    </tr>
    <tbody id="bbsTab">
    <tr >
        <td></td>
        <td>2015001</td>
        <td>小明</td>
        <td>90</td>
    </tr>
    <tr >
        <td></td>
        <td>2015002</td>
        <td>小红</td>
        <td>95</td>
    </tr>
    <tr >
        <td></td>
        <td>2015003</td>
        <td>小华</td>
        <td>88</td>
    </tr>
    <tr >
        <td></td>
        <td>2015004</td>
        <td>小刚</td>
        <td>92</td>
    </tr>
    <tr >
        <td></td>
        <td>2015005</td>
        <td>小丽</td>
        <td>100</td>
    </tr>
    <tr >
        <td></td>
        <td>2015006</td>
        <td>小蓝</td>
        <td>85</td>
    </tr>
    </tbody>
</table>
</body>
</html>

jQuery 的下载链接 : https://jquery.com/download/
tablednd 的下载链接: https://github.com/isocra/TableDnD/tree/master/js