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 相关文章推荐
二级域名转向类
Nov 09 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 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
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
PHP return语句的另一个作用
2014/07/30 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
python自动化测试之setUp与tearDown实例
2014/09/28 Python
python循环监控远程端口的方法
2015/03/14 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
python打包多类型文件的操作方法
2020/09/21 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
中专毕业个人的自荐信格式
2013/09/21 职场文书
作风建设剖析材料
2014/10/06 职场文书
2019年思想汇报
2019/06/20 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python