JavaScript操作表格进行拖拽排序

 

 

<js-dodo-table-

Drag and Drop JQuery plugin

>

以上插件可对table进行排序,拖动!

 

例如有下面一个样子的id为table的表格:

<table id="table" 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>

 

-使用此方法需先引入jquery.js文件

<script type="text/javascript">
$(document).ready(
function() {
    
// Initialise the table
    $("#table").tableDnD();
});
</script>

 

-

如此,则能轻松对表格进行排序!

如果需要将排序完成后表格的row id输出排序后的数组,则使用如下方法:

$('#table').tableDnD({
        onDrop: 
function(table, row) {
            alert($.tableDnD.serialize());
        }
    });

 

而我在用这个的时候,并不是用的它的排序结果,而是自己手写了一个遍历表格后,取出每一行的id的代码片段。
这段小代码很简单,如下:


        $(document).ready(
function() {

            $(
"#table").tableDnD({
                
//当拖动排序完成后
                onDrop: function() {
                    
//获取id为table的元素
                    var table = document.getElementById("table");
                    
//获取table元素所包含的tr元素集合
                    var tr = table.getElementsByTagName("tr");
                    
//遍历所有的tr
                    for (var i = 0; i < tr.length; i++) {
                        
//获取拖动排序结束后新表格中,row id的结果
                        var rowid = tr[i].getAttribute("id");
                        alert(rowid);
                    }
                }
            });
            
        });

 

 

 

,zuihou 最后给出这个表格拖动排序的demo。

没有任何技术含量,别人写的插件,仅仅是插件应用的简单介绍而已。让您贱笑了。

 

ExpandedBlockStart.gifJavaScript HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<title>JavaScript表格拖动排序</title>
    
<script src="js/jquery.js" type="text/javascript"></script>
    
<script src="js/tablednd.js" type="text/javascript"></script>
    
<script type="text/javascript">

        $(document).ready(
function() {

            $(
"#table").tableDnD({
                
//当拖动排序完成后
                onDrop: function() {
                    
//获取id为table的元素
                    var table = document.getElementById("table");
                    
//获取table元素所包含的tr元素集合
                    var tr = table.getElementsByTagName("tr");
                    
//遍历所有的tr
                    for (var i = 0; i < tr.length; i++) {
                        
//获取拖动排序结束后新表格中,row id的结果
                        var rowid = tr[i].getAttribute("id");
                        alert(
"排序完成后表格的第 " + (i+1+ " 行id为 : " + rowid);
                    }
                }
            });

        });

    
    
</script>
</head>
<body>

用鼠标移动TR
<br/>

<div style=" margin:100px;">

    
<table id="table" width="600" border="0">

            
<tr id="row_1"  style="width:600px; height:20px; background-color:Olive;">
                
<td style="">1</td>
                
<td>parentElement</td>
                
<td>moveRow 1</td>
                
<td>parentElement</td>
            
</tr>
            
<tr id="row_2"  style=" width:600px;height:20px; background-color:Green;">
                
<td style=" ">2</td>
                
<td>parentElement</td>
                
<td>moveRow 2</td>
                
<td>parentElement</td>
            
</tr>
            
<tr id="row_3"  style="width:600px; height:20px; background-color:Gray;">
                
<td style=" ">3</td>
                
<td>parentElement</td>
                
<td>moveRow 3</td>
                
<td>parentElement</td>
            
</tr>
            
<tr id="row_4"  style=" width:600px; height:20px;background-color:Red;">
                
<td style=" ">4</td>
                
<td>parentElement</td>
                
<td>moveRow 4</td>
                
<td>parentElement</td>
            
</tr>
            
<tr id="row_5"  style="width:600px;  height:20px;background-color:#ccc;">
                
<td style="">5</td>
                
<td>parentElement</td>
                
<td>moveRow 5</td>
                
<td>parentElement</td>
            
</tr>

    
</table>
    
    
</div>
    
</body>
</html>

 

 

 

 

 

 

转载于:https://www.cnblogs.com/didi/archive/2010/03/22/1691663.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276142.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UBUNTU 用户及用户组管理 修改用户和主机名

转载链接&#xff1a;http://blog.sina.com.cn/s/blog_66439a3e0101dm1g.html 一、用户及用户组管理 创建组&#xff1a; $sudo addgroup ccache 创建用户&#xff1a; $sudo useradd ccache -g ccache -M 创新wfz用户并创建HOME目录&#xff0c;指定用户组为ccache $sudo u…

ping -a 获取不到主机名_网络测试命令——PING

命令功能&#xff1a;Linux系统和windows系统的ping命令是常用的网络命令&#xff0c;它通常用来测试与目标主机的连通性&#xff0c;这样我们就可以根据它ping输出的信息来确定目标主机是否可访问(但这不是绝对的)。有些服务器为了防止通过ping探测到&#xff0c;通过防火墙设…

写在2021: 值得关注/学习的前端框架和工具库

前言最近在知乎看到了这么个问题&#xff1a;学完Vue还有必要学习React和Node吗&#xff1f;[1]&#xff0c; 有很奇妙的感觉&#xff0c;因为我在最开始入门前端时&#xff0c;也是以Vue入的门&#xff0c;在“学完”Vue之后&#xff0c; 我也有了这个疑问&#xff0c;但当时的…

万物互联之~RPC专栏

3.RPC引入 上篇回顾&#xff1a;万物互联之~深入篇 Code&#xff1a;https://github.com/lotapp/BaseCode/tree/master/python/6.net/6.rpc/ 其他专栏最新篇&#xff1a;协程加强之~兼容答疑篇 | 聊聊数据库~SQL环境篇 3.1.概念 RPC(Remote Procedure Call)&#xff1a;分布式系…

python判断字符大小写转换_Python 字符串大小写转换的简单实例

①所有字母都转换为大写# -*- coding:utf-8 -*-if __name__ "__main__":a hello, world!print(a.upper())输出&#xff1a;HELLO, WORLD!②所有字母都转换为小写# -*- coding:utf-8 -*-if __name__ "__main__":a HELLO, WORLD!print(a.lower())输出&am…

正则表达式如何匹配正反斜杠

转载链接&#xff1a;http://wiki.ubuntu.org.cn/Python%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%93%8D%E4%BD%9C%E6%8C%87%E5%8D%97#.E5.8F.8D.E6.96.9C.E6.9D.A0.E7.9A.84.E9.BA.BB.E7.83.A6 反斜杠的麻烦 在早期规定中&#xff0c;正则表达式用反斜杠字符 ("…

前端进阶必备Node.js,你得了解一下

作为前端开发&#xff0c;工作中肯定离不开 JavaScript &#xff0c;而 Node.js 是基于 JavaScript 语言和 V8 引擎的 Web 服务器项目&#xff0c;让你可以直接使用 JavaScript 来搭架服务器。而且在 Node 环境下&#xff0c;通过模块化的 JavaScript 代码&#xff0c;加上函数…

Google推出“Google实验室” Ad Innovations

4月1日消息&#xff0c;据国外媒体报道&#xff0c;Google近日推出了Ad Innovations功能&#xff0c;类似于“Google实验室”&#xff0c;但专门用于展示最新的广告技术、方案等&#xff0c;并征求广告主的反馈。 目前Ad Innovations已有数款新功能&#xff0c;Google将按照反馈…

JS中utf8和GBK的字符编码转换

1、PHP中的 json_encode 函数只限编码UTF-8的数据&#xff0c;当转换GBK或者GB2312等编码的数据时&#xff0c;会将汉字转为NULL。 2、JavaScript 中json 的使用&#xff1a; ① 将对象转为json字符串&#xff1a;JSON.stringify(obj)② 将json转为对象&#xff1a;dataObj ev…

tcptracerte参数_TCP/IP详解学习笔记(4)-ICMP协议,ping和Traceroute【转】

1.IMCP协议介绍前面讲到了&#xff0c;IP协议并不是一个可靠的协议&#xff0c;它不保证数据被送达&#xff0c;那么&#xff0c;自然的&#xff0c;保证数据送达的工作应该由其他的模块来完成。其中一个重要的模块就是ICMP(网络控制报文)协议。当传送IP数据包发生错误&#xf…

[实践系列]Promises/A+规范

前言 [实践系列] 主要是让我们通过实践去加深对一些原理的理解。 实践系列-前端路由 实践系列-Babel原理 有兴趣的同学可以关注 实践系列 。 求star求follow~ 什么是Promise ? Promise是JS异步编程中的重要概念&#xff0c;异步抽象处理对象&#xff0c;是目前比较流行Javas…

Web Components 上手指南

现在的前端开发基本离不开 React、Vue 这两个框架的支撑&#xff0c;而这两个框架下面又衍生出了许多的自定义组件库&#xff1a;Element&#xff08;Vue&#xff09;Ant Design&#xff08;React&#xff09;这些组件库的出现&#xff0c;让我们可以直接使用已经封装好的组件&…

隐藏网页文件的后缀(IIS测试通过)!

网上很多网站会看到如这样的地址: /content?actadd&id1 /column?actedit&id2 原本是 /content.asp?actadd&id1 /column.asp?actedit&id2 这样的效果就是在iis上做了下手脚&#xff0c;使用了rewrite重写组件&#xff0c;就可以实现。 rewrite.rar转载于:ht…

Linux下查看文件内容的ASCII码以检查内容的编码一致

转载链接&#xff1a;http://blog.csdn.net/tiantang46800/article/details/6460567 ascii查询方式&#xff0c;查看文件以ascii显示&#xff0c;od命令 随着计算机飞速的发展&#xff0c;很多人开始学习Linux&#xff0c;怎样才能学好Linux&#xff0c;一定要学好Linux的命令…

乘基取整法是什么_十进制小数转二进制小数乘2取整法的直观理解

乘2取整法介绍举例&#xff1a;0.35转换成二进制0.3520.7 取0(d1)0.721.4 取1(d2)0.420.8 取0(d3)0.821.6 取1(d4)0.621.2 取1(d5)0.220.4 取0(d6)直到满足规定的位数为止所以(0.35)10(0.d1d2d3d4d5d6)2(0.010110)2这个方法不难掌握&#xff0c;就是有点不好理解&#xf…

如何远程连接Windows和linux服务器

linux的方法在下面 Windows服务器远程连接 登录控制台查看服务器系统是什么系统例如阿里云的ECS服务器 Windows系统可以使用微软自带的远程工具进行连接&#xff0c;可以连接的系统有Windows server 和Windows 7-10 等等系列&#xff1b;Windows系统&#xff0c;例如Windows10系…

URL是什么

URL是什么意思&#xff1f; 悬赏分&#xff1a;0 - 提问时间2006-3-12 08:14我在玩QQ空间的时候&#xff0c;在添加音乐时会有一个添加URL的地方‘&#xff5e;我是想问那是什么意思&#xff1f;&#xff1f;&#xff1f;提问者&#xff1a; caoyiwang1107 - 魔法学徒 一级 其他…

手把手教你接入前端热门抓包神器 - whistle

大家好&#xff0c;我是若川&#xff0c;今天推荐腾讯前端团队的这篇好文。whistle 是一个基于 Node.js 的跨平台网络调试工具。最近随着 Nohost 的开源&#xff0c;有不少同学问了 whistle 相关的问题&#xff0c;本篇文章将结合几个常见的业务场景介绍如何在本地前端项目开发…

Linux命令之hexdump - ”十六“进制查看器

转载链接&#xff1a;http://codingstandards.iteye.com/blog/805778 用途说明 hexdump命令一般用来查看”二进制“文件的十六进制编码&#xff0c;但实际上它的用途不止如此&#xff0c;手册页上的说法是“ascii, decimal, hexadecimal, octal dump“&#xff0c;这也就是本文…

使用数据增强技术提升模型泛化能力

在《提高模型性能&#xff0c;你可以尝试这几招...》一文中&#xff0c;我们给出了几种提高模型性能的方法&#xff0c;但这篇文章是在训练数据集不变的前提下提出的优化方案。其实对于深度学习而言&#xff0c;数据量的多寡通常对模型性能的影响更大&#xff0c;所以扩充数据规…