JQuery-tableDnD 拖拽的基本使用介绍


Posted in Javascript onJuly 04, 2013

在页面上导入js

jquery-1.3.2.min.js
jquery.tablednd_0_5.js
注意:一定要先导入jquery-1.3.2.min.js 否则出错。

·建table
<table id="table-1" cellspacing="0" cellpadding="2">
    <tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
    <tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
    <tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
    <tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
    <tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
    <tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
</table>

·插入js代码
<script type="text/javascript">
  $(document).ready(function() {
        $("#table-1").tableDnD();
    });
 </script>

·ok。
·例子
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    pageContext.setAttribute("basePath", basePath);
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
       <script type="text/javascript"
           src="${basePath}common/js/jquery-1.3.2.min.js"></script>
       <script type="text/javascript"
           src="${basePath}common/js/jquery.tablednd_0_5.js"></script>
       <style type="text/css">
.aa {
    background: #00FF99
}.bb {
    background: #0066FF
}
</style>
<script type="text/javascript">
  $(document).ready(function() {  
  color();
        $("#table-1").tableDnD({
           onDrop:function(table,row){
           var b = $(row).children().eq(0).text();
           color();
            } 
        }); 
    });
    function color()
    {
       var tbody = $("table[id='table-1'] tr");
       tbody.each(function(index){
          var cc = index%2;
          if(0==cc)
            {
            $(this).removeClass();
            $(this).addClass("aa"); 
            }
           else
           {
           $(this).removeClass();
            $(this).addClass("bb"); 
           }
       });
    }
 </script>
    </head>
    <body>
       <table id="table-1" cellspacing="0" cellpadding="2">
           <tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
           <tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
           <tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
           <tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
           <tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
           <tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
       </table>
    </body>
</html>

Javascript 相关文章推荐
JavaScript国旗变换效果代码
Aug 13 Javascript
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 #Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 #Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 #Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 #Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 #Javascript
一个封装js代码-----展开收起效果示例
Jul 03 #Javascript
jQuery中after的两种用法实例
Jul 03 #Javascript
You might like
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
python threading模块操作多线程介绍
2015/04/08 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
Python切换pip安装源的方法详解
2016/11/18 Python
python pandas修改列属性的方法详解
2018/06/09 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
股东授权委托书范文
2014/09/13 职场文书
质量整改报告范文
2014/11/08 职场文书
周年庆典答谢词
2015/01/20 职场文书
承诺保证书格式
2015/02/28 职场文书
社区服务活动感想
2015/08/11 职场文书
PHP实现两种排课方式
2021/06/26 PHP
react中的DOM操作实现
2021/06/30 Javascript
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript