返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: javascript学习 >

使用TableDnD插件更换表格顺序

2020-04-22 文章标签: javsacript TableDnD 表格 浏览次数:

我们继续讲解jquery插件介绍,今天介绍的是使用TableDnD插件,该插件可以实现表格里面行的拖动效果,常见于网站后台信息排序,直接把要改变顺序的行进行拖动。

jquery操作创建元素

我们看看代码效果

TableDnD插件

是不是感觉不错,还是非常实用的呢,我们看看该插件的用法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TableDnD</title>
<link href="//freemuban.com/js/422/table.css" rel="stylesheet" type="text/css" media="all">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/422/tablednd.js"></script>
<script type="text/javascript">
$(function(){
var table = document.getElementById('grid');
var tableDnD = new TableDnD();
tableDnD.init(table);
})
</script>
<style type="text/css">
</style>
</head>
<body>
<h1>TableDnD拖拽表格行</h1>
<table id="grid">
    <thead>
        <tr>
            <th nowrap="nowrap">排名</th>
            <th nowrap="nowrap">校名</th>
            <th nowrap="nowrap">总得分</th>
            <th nowrap="nowrap">人才培养总得分</th>
            <th nowrap="nowrap">研究生培养得分</th>
            <th nowrap="nowrap">本科生培养得分</th>
            <th nowrap="nowrap">科学研究总得分</th>
            <th nowrap="nowrap">自然科学研究得分</th>
            <th nowrap="nowrap">社会科学研究得分</th>
            <th nowrap="nowrap">所属省份</th>
            <th nowrap="nowrap">分省排名</th>
            <th nowrap="nowrap">学校类型</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>清华大学 </td>
            <td>296.77</td>
            <td>128.92</td>
            <td>93.83</td>
            <td>35.09</td>
            <td>167.85</td>
            <td>148.47</td>
            <td>19.38</td>
            <td width="16">京 </td>
            <td width="12">1 </td>
            <td>理工 </td>
        </tr>
        <tr>
            <td>2</td>
            <td>北京大学 </td>
            <td>222.02</td>
            <td>102.11</td>
            <td>66.08</td>
            <td>36.03</td>
            <td>119.91</td>
            <td>86.78</td>
            <td>33.13</td>
            <td>京 </td>
            <td>2 </td>
            <td>综合 </td>
        </tr>
        <tr>
            <td>3</td>
            <td>浙江大学 </td>
            <td>205.65</td>
            <td>94.67</td>
            <td>60.32</td>
            <td>34.35</td>
            <td>110.97</td>
            <td>92.32</td>
            <td>18.66</td>
            <td>浙 </td>
            <td>1</td>
            <td>综合 </td>
        </tr>
        <tr>
            <td>4</td>
            <td>上海交大</td>
            <td>150.98</td>
            <td>67.08</td>
            <td>47.13</td>
            <td>19.95</td>
            <td>83.89</td>
            <td>77.49</td>
            <td>6.41</td>
            <td>沪 </td>
            <td>1</td>
            <td>综合 </td>
        </tr>
        <tr>
            <td>5</td>
            <td>南京大学</td>
            <td>136.49</td>
            <td>62.84</td>
            <td>40.21</td>
            <td>22.63</td>
            <td>73.65</td>
            <td>53.87</td>
            <td>19.78</td>
            <td>苏</td>
            <td>1</td>
            <td>综合 </td>
        </tr>
        <tr>
            <td>6</td>
            <td>复旦大学 </td>
            <td>136.36</td>
            <td>63.57</td>
            <td>40.26</td>
            <td>23.31</td>
            <td>72.78</td>
            <td>51.47</td>
            <td>21.31</td>
            <td>沪</td>
            <td>2</td>
            <td>综合 </td>
        </tr>
        <tr>
            <td>7</td>
            <td>华中科大</td>
            <td>110.08</td>
            <td>54.76</td>
            <td>30.26</td>
            <td>24.50</td>
            <td>55.32</td>
            <td>47.45</td>
            <td>7.87</td>
            <td>鄂 </td>
            <td>1</td>
            <td>理工 </td>
        </tr>
        <tr>
            <td>8</td>
            <td>武汉大学 </td>
            <td>103.82</td>
            <td>50.21</td>
            <td>29.37</td>
            <td>20.84</td>
            <td>53.61</td>
            <td>36.17</td>
            <td>17.44</td>
            <td>鄂 </td>
            <td>2</td>
            <td>综合</td>
        </tr>
        <tr>
            <td>9</td>
            <td>吉林大学 </td>
            <td>96.44</td>
            <td>48.61</td>
            <td>25.74</td>
            <td>22.87</td>
            <td>47.83</td>
            <td>38.13</td>
            <td>9.70</td>
            <td>吉 </td>
            <td>1</td>
            <td>综合</td>
        </tr>
        <tr>
            <td>10</td>
            <td>西安交大</td>
            <td>92.82</td>
            <td>47.22</td>
            <td>24.54</td>
            <td>22.68</td>
            <td>45.60</td>
            <td>35.47</td>
            <td>10.13</td>
            <td>陕</td>
            <td>1</td>
            <td>综合</td>
        </tr>
    </tbody>
</table>
</body>
</html>


建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。