JavaScript操作表格进行拖拽排序
<js-dodo-table-
Drag and Drop JQuery plugin
>
以上插件可对table进行排序，拖动！
例如有下面一个样子的id为table的表格：
<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文件
$(document).ready(function() {
// Initialise the table
$("#table").tableDnD();
});
</script>
-
如此，则能轻松对表格进行排序！
如果需要将排序完成后表格的row id输出排序后的数组，则使用如下方法：
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。
没有任何技术含量，别人写的插件，仅仅是插件应用的简单介绍而已。让您贱笑了。
JavaScript HTML
<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
JavaScript操作表格进行拖拽排序相关推荐
- Vue Element 表格实现拖拽排序
1.安装sortablejs npm install sortablejs --save 2.在需要的页面引入 import Sortable from 'sortablejs' 3.具体使用,注意的 ...
- ant vue 树形菜单横向显示_丝滑般 Vue 拖拽排序树形表格组件Vue-DragTreeTable
今天给小伙伴们分享一款纵享丝滑般体验的Vue拖拽树形表格DragTreeTable. vue-drag-tree-table 基于vue.js实现可拖拽排序的树形表格组件.支持拖拽排序.固定表头.拖拽 ...
- 前端项目中常用的工具包（拖拽排序表格、打印导出表格、文本复制等）【持续更新~~~】
表格类: cdn库 cdn vxe-table[开源的多功能表格] 简介 一个基于 vue 的 PC 端表格组件,支持增删改查.虚拟滚动.懒加载.快捷菜单.数据校验.树形结构.打印导出.表单渲染.数据 ...
- Vue + Element 表格拖拽排序、树形表格拖拽排序
今天给大家分享一下表格(列表)及树形表格拖拽排序,树形表格排序的教程不多,可能还会有问题,我在这里详细给大家讲解一下,如果你有这样的需求或觉得有用,请给个关注或收藏一下吧,方便后期查看使用. 安装so ...
- Qt可拖拽排序表格（解决滚动条不兼容问题，类似QQ好友分组排序）
原版链接 https://blog.csdn.net/dpsying/article/details/77206127 Qt可拖拽排序表格(类似QQ好友分组排序) 感谢博主无私分享 修改后,解决了滚动 ...
- 基于Vue实现表格拖拽排序——sortablejs
表格拖拽排序 1.安装插件 2.页面引入sortablejs 3.准备表格渲染所需的数据 4.绘制表格结构(要绑定唯一的值row-key,不然会出错) 5.完成表格行与列的拖拽排序事件 1.安装插件 ...
- Android表格拖拽排序,Android 拖拽排序控件 DragGridView
Android 拖拽排序控件 DragGridView Android 开发中,我们经常会遇到条目拖拽排序的需求,特别是在新闻类应用中就更普遍了.其实,我们在网上可以搜到许多关于拖拽排序的自定义控件, ...
- html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...
- JS组件系列——Bootstrap Table 表格行拖拽
JS组件系列--Bootstrap Table 表格行拖拽 原文:JS组件系列--Bootstrap Table 表格行拖拽 前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一 ...
最新文章
- 从零开始学习Sencha Touch MVC应用之八
- 2019计算机原理及应用期末自测题,微机原理期末自测题答案.ppt
- ConfigParser
- go空接口interface{}是任意类型
- 学计算机平面设计可以找什么工作,大学生学了平面设计之后能找什么样的工作...
- Party at Hali-Bula UVA - 1220（树形dp）
- 剑指Offer - 面试题40. 最小的k个数（排序/大顶堆）
- c语言程序计算4阶行列式的值,如何用降阶法求解四阶行列式的计算，请帮我编一个C语言程序。...
- pytorch输出分类结果并显示每个类别的概率
- 选择排序是外面循环的array[i]与内循环的array[j]比较。冒泡排序是内循环的相邻两个值做比较修改...
- 用C语言实现：打印100-200之间的素数。
- java 如何执行dig 命令_如何直接在cmd下执行Dig命令
- 转子系统动力学模型matlab程序代码
- 升级bigsur_苹果，Big Sur，新拟物化的兴起
- 2022-2027年中国平台经济行业市场全景评估及发展战略规划报告
- 移动端UI一致性解决方案
- 将Android 根目录挂载为 可读可写RW
- 动态规划法(二)——弗洛伊德算法
- 斐讯携手思科建设数据中心 驱动区块链业务落地
- bsf dfs 专题（一）