编程 Javascript

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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Google Map Api和GOOGLE Search Api整合实现代码

Jul 18 Javascript

jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】

Sep 20 Javascript

jQuery Password Validation密码验证

Dec 30 Javascript

js实现复选框的全选和取消全选效果

Jan 03 Javascript

BootstrapValidator实现注册校验和登录错误提示效果

Mar 10 Javascript

JavaScript输入框字数实时统计更新

Jun 17 Javascript

纯JS实现只能输入数字的简单代码

Jun 21 Javascript

vue实现图片加载完成前的loading组件方法

Feb 05 Javascript

解决vue中无法动态修改jqgrid组件 url地址的问题

Mar 01 Javascript

layui use 定义js外部引用函数的方法

Sep 26 Javascript

关于layui的下拉搜索框异步加载数据的解决方法

Sep 28 Javascript

JavaScript实现贪吃蛇游戏

Jun 16 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