编程 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 相关文章推荐

ASP中用Join和Array，可以加快字符连接速度的代码

Aug 22 Javascript

JavaScript面向对象编程

Mar 02 Javascript

jquery分页插件AmSetPager(自写)

Apr 15 Javascript

window.showModalDialog参数传递中含有特殊字符的处理方法

Jun 06 Javascript

js获取事件源及触发该事件的对象

Oct 24 Javascript

提升PHP安全：8个必须修改的PHP默认配置

Nov 17 Javascript

微信小程序支付简单实例及注意事项

Jan 06 Javascript

关于微信小程序bug记录与解决方法

Aug 15 Javascript

详解Vue之父子组件传值

Apr 01 Javascript

react native 仿微信聊天室实例代码

Sep 17 Javascript

Vue实现页面添加水印功能

Nov 09 Javascript

解决ant Design Search无法输入内容的问题

Oct 29 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