JQuery-tableDnD 拖拽的基本使用

最新推荐文章于 2022-11-13 23:54:39 发布
最新推荐文章于 2022-11-13 23:54:39 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： JQuery 文章标签： function table html string path
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tenor/article/details/4560949
版权

 

·在页面上导入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>

 

 

tenor
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
tableDnD实现table里行的拖拽排序
谦进
08-25 7595
tableDnD是一个能使table里的行能拖动排序的插件。这个插件的主页在Github上，用谷歌去查，百度一下，你什么都不会知道。使用这个插件也很简单，直接给table节点绑定这个插件就行了。
JQuery-tableDnD 拖拽的基本使用介绍
12-11
在页面上导入js 代码如下:jquery-1.3.2.min.jsjquery.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>
TableDnD：jQuery插件，用于拖放HTML表中的行
02-03
表格 安装 TableDnD易于安装： npm install --save tablednd 要么 yarn add tablednd 要么 bower install https://github.com/isocra/TableDnD.git 或者，您可以简单地从CDNJS进行引用： < script src =" https://cdnjs.cloudflare.com/ajax/libs/TableDnD/0.9.1/jquery.tablednd.js " integrity =" sha256-d3rtug+Hg1GZPB7Y/yTcRixO/wlI78+2m08tosoRn
【jqgrid表格拖拽】实现jqgrid表格拖拽调整顺序功能
赏樱看雪撸代码
11-13 1143
jqgrid的表格组件支持拖拽排序
html表格列拖动插件,TableDnd(JQuery报表拖拽控件)应用进阶
weixin_39911916的博客
06-10 737
TableDnd(JQuery表格拖拽控件)应用进阶在上一篇文章一个很好用的JQuery Table拖拽控件中，介绍了TableDnD这个强大的控件，目前是我博客浏览次数最多的文章……现在再简单介绍一下他的应用吧：在之前文章里介绍了，使用时很方便：$("#table").tableDnD();下面就介绍几个实用的选项：1.onDragClass(onDragStyle)：拖拽时样式，我们在拖拽一个...
tablednd保存 php,TableDnD-JavaScript中文网-JavaScript教程资源分享门户
weixin_39861920的博客
03-21 90
TableDnD是什么什么是TableDnD，jQuery plug-in to drag and drop rows in HTML tablesTableDnD官网：官网TableDnD文档：文档TableDnD源码仓库：源码仓库TableDnD下载地址：点此下载 点此下载2TableDnD介绍、TableDnD使用InstallationTableDnD is easy to install...
JQuery-tableDnD 拖拽的基本使用 Table Drag and Drop JQuery plugin
08-07
`JQuery-tableDnD` 是一个用于实现表格元素拖放功能的 jQuery 插件，它使得用户可以通过鼠标拖拽来重新排序表格行，从而增强交互性和用户体验。在这个插件的帮助下，开发人员可以轻松地创建具有动态排序功能的数据...
bootstrapTable jquery.tablednd行拖动调整资源.zip
12-06
此压缩包"bootstrapTable jquery.tablednd行拖动调整资源.zip"包含了一组与BootstrapTable集成的jQuery Tablednd插件，主要用于实现表格行的拖放功能，以便用户可以通过直观的交互方式调整数据的顺序。 jQuery ...
前端项目-TableDnD.zip
09-02
3. **初始化插件**：在文档加载完成后，使用jQuery的`$(document).ready()`函数初始化TableDnD，指定表格ID： ```javascript $(function() { $("#myTable").tableDnD(); }); ``` 4. **事件处理**：TableDnD提供了...
tableDnD完整实现表格行的拖动
07-17
tableDnD完整实现表格行的拖动，并显示数据的变化
jquery.tablednd.js
01-15
jquery.tablednd.js 用于table拖动 ；添加 $("#tablename").tableDnD();初始化
bootstrap-table实现 行拖拽 插件jquery.tablednd.js bootstrap-table-reorder-rows.js
11-07
bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css
jquery.tablednd_0_5.zip
06-05
## 使用基本步骤 1. **初始化表格**：使用jQuery选择器找到你要操作的表格，并调用`.tableDnD()`方法对其进行初始化。这将为表格元素添加必要的CSS类和事件监听器，以实现拖放功能。 ```javascript $("#myTable")....
表格拖动排序插件TableDnD
06-01
在实际应用中，TableDnD可以通过jQuery选择器指定需要启用拖动排序功能的表格。例如，如果你有一个id为"myTable"的表格，可以这样初始化插件： ```javascript $(document).ready(function() { $("#myTable")....
原生JS表格行拖动排序，添加了回调功能
weixin_30306905的博客
11-14 155
function tableDnD(el, callback) { if (typeof (el) == "string") { el = document.getElementById(el); } if (el == undefined || el == null) { return; } //绑定事件 var a...
使用tableDnD实现表格拖拽排序功能
Mervyn的博客
11-12 759
今天做项目需要用到拖拽调整排序的功能。 做个使用tableDnD插件实现的记录。 tableDnD插件Github 放个demo代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Table拖拽测试</title> <...
html 拖拽选择表格,实例：使用jQuery插件TableDnD拖放HTML表(table)行
weixin_35682010的博客
06-03 609
HTML表(table)是显示数据的首选UI选项，排序、分页和搜索/过滤是具有大量数据的任何HTML表的必备功能，这些功能使HTML表格对最终用户而言更加友好且高效。在某些情况下，可能需要HTML表行的拖放功能，不幸的是，jQuery本身并不具备这个功能。为了实现这一点，我们需要使用一个名为TableDnD的jQuery插件。在这篇文章中，我们将学习如何使用jQuery插件TableDnD实现拖放...
jquery-1.8.2.min 使用
最新发布
05-31
要使用jquery-1.8.2.min，你需要先下载这个文件并将其引入到你的网页中。可以通过以下步骤来使用： 1. 下载jquery-1.8.2.min.js文件，并将其保存在你的项目文件夹中。 2. 在你的HTML文件中，通过以下代码将jQuery...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值