js技术之拖动table标签
一.js技术之拖动table标签
起因：前几天公司，突然安排一个任务
任务描述：要求尺码table列表要像Excel表中一样可以直接移动整行尺码到任意行位置
技术点：采用ui的sortable技术来helper进行移动
所需ui的js：<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
注意：这只是讲述拖动的技术点，并非整个功能，因为还有下标等缺陷未加入其中
二.代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 </head>
6 <body>
7 <!--用于定位-->
8 <div id="product-sizechart-list">
9 <!--table表-->
10 <table class="table table-bordered table-condensed">
11 <!-- 公司格式（同样用于定位）-->
12 <tbody class="ui-sortable">
13 <!--第一行-->
14 <tr id="sizechart-item-0" class="ui-sortable-handle">
15 <td width="100">
16 <input id="13756" class="form-control input-small" type="text"
17 name="product.productSizeChart.sizeChartItemList[0].sizePropertyList[0].attrValue" placeholder=""
18 onblur="sizeConversion(this)" value="1">
19 </td>
20
21 <td>
22 <input id="13758" class="form-control input-small" type="text"
23 name="product.productSizeChart.sizeChartItemList[0].sizePropertyList[1].attrValue" placeholder=""
24 onblur="sizeConversion(this)" value="1">
25 </td>
26
27 <td>
28 <input id="13760" class="form-control input-small" type="text"
29 name="product.productSizeChart.sizeChartItemList[0].sizePropertyList[2].attrValue" placeholder=""
30 onblur="sizeConversion(this)" value="1">
31 </td>
32
33 </tr>
34 <!--第二行-->
35 <tr id="sizechart-item-1" class="ui-sortable-handle">
36 <td>
37 <input id="13772" class="form-control input-small" type="text"
38 name="product.productSizeChart.sizeChartItemList[1].sizePropertyList[2].attrValue" placeholder=""
39 onblur="sizeConversion(this)" value="11cm/4.33''">
40 </td>
41
42 <td>
43 <input id="13774" class="form-control input-small" type="text"
44 name="product.productSizeChart.sizeChartItemList[1].sizePropertyList[3].attrValue" placeholder=""
45 onblur="sizeConversion(this)" value="11cm/4.33''">
46 </td>
47
48 <td>
49 <input id="13776" class="form-control input-small" type="text"
50 name="product.productSizeChart.sizeChartItemList[1].sizePropertyList[4].attrValue" placeholder=""
51 onblur="sizeConversion(this)" value="11cm/4.33''">
52 </td>
53 </tr>
54 <!--第三行-->
55 <tr id="sizechart-item-2" class="ui-sortable-handle">
56 <td>
57 <input id="13784" class="form-control input-small" type="text"
58 name="product.productSizeChart.sizeChartItemList[2].sizePropertyList[2].attrValue" placeholder=""
59 onblur="sizeConversion(this)" value="1">
60 </td>
61
62 <td>
63 <input id="13786" class="form-control input-small" type="text"
64 name="product.productSizeChart.sizeChartItemList[2].sizePropertyList[3].attrValue" placeholder=""
65 onblur="sizeConversion(this)" value="1">
66 </td>
67
68 <td>
69 <input id="13788" class="form-control input-small" type="text"
70 name="product.productSizeChart.sizeChartItemList[2].sizePropertyList[4].attrValue" placeholder=""
71 onblur="sizeConversion(this)" value="1">
72 </td>
73 </tr>
74 <!--第四行-->
75 <tr id="sizechart-item-3" class="ui-sortable-handle">
76 <td>
77 <input id="13796" class="form-control input-small" type="text"
78 name="product.productSizeChart.sizeChartItemList[3].sizePropertyList[2].attrValue" placeholder=""
79 onblur="sizeConversion(this)" value="11cm/4.33''">
80 </td>
81
82 <td>
83 <input id="13798" class="form-control input-small" type="text"
84 name="product.productSizeChart.sizeChartItemList[3].sizePropertyList[3].attrValue" placeholder=""
85 onblur="sizeConversion(this)" value="1">
86 </td>
87
88 <td>
89 <input id="13800" class="form-control input-small" type="text"
90 name="product.productSizeChart.sizeChartItemList[3].sizePropertyList[4].attrValue" placeholder=""
91 onblur="sizeConversion(this)" value="1">
92 </td>
93 </tr>
94 </tbody>
95 </table>
96 </div>
97 </body>
98 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
99 <!--导入ui的js-->
100 <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
101 <script type="text/javascript">
102 <!--局部刷新-->
103 $(document).ready(function () {
104 // 获取id为product-sizechart-list下的table下tbody标签，进行排序操作
105 $("#product-sizechart-list table tbody").sortable({
106 helper: function (e, ui) {
107 // ui.辅助定位函数.为每个匹配元素规定运行的函数（这样就可以移动尺码行了）
108 ui.children().each(function () {
109 // 设置宽度和上下宽度和浏览器框为一致
110 $(this).width($(this).width());
111 });
112 // 返回ui
113 return ui;
114 }
115 });
116 // 获取id为product-sizechart-list下的table下tbody标签 设置文本为禁用选择
117 // 因为他们要拖动，所以尽量设置他们的文字不能选择
118 $("#product-sizechart-list table tbody").disableSelection();
119 });
120 </script>
121 </html>
三.结果图
选择第一行
移动第三行
移动后结果图
四.总结
- 个人觉得这是一个技术升级
- 这里的js版本不能太低，我记得是需要3以上的版本越高越好
- 除了table的移动，在jquery菜鸟训练营中还有<li></li>的案例
- sortable 下面的方法还有很多，由于本人技术未过关，部分还未校验出效果
- helper这个给我的感觉更新定位时限制的框，
js技术之拖动table标签的更多相关文章
- js把页面的table标签导出为csv
// 使用该保存方法,table必须外嵌一个div且不能有任何其他元素 否则ie下载会出现其他数据 //tableid , title 为文件保存的文件名 function saveCode(tabl ...
- JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- js实现拉伸拖动iframe的具体代码
这篇文章介绍了js实现拉伸拖动iframe的具体代码,有需要的朋友可以参考一下左边iframe放树目录,右边的iframe放index页.拖鼠标同时控制2个iframe的宽高.期待有人能改进.操作方法 ...
- Kure讲HTML_div标签和table标签
为什么要把这两个标签放在一起讲? 个人认为div标签可以算是一个万能标签,它可以通过CSS(层叠样式表)来模仿表格的形式来生成一个表格.那么很多人可能会疑惑那在开发的时候,到底是用div+css的形式 ...
- display：table标签来自动改变列宽 改变的同时table的整体宽度跟随变化
发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...
- 使用JS和PHP导出table表格
把table表格的内容导出成excel 或者word等格式(简单容易不需要太多php) 导出需注意 1. 样式都在行间,导出excel表格会继承样式包括colspan.rowspan,非表格元素,样式 ...
- js实现可拖动Div
随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...
- js实现动态操作table
本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...
- 基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
随机推荐
- 【C# 调试】.net中的 .pdb文件是什么,有什么用
mscn:在 Visual Studio 调试器(C#)中指定符号 (.pdb) 和源文件 PDB全称Program Database,程序数据库 ( .pdb) 文件(也称为符号文件)将项目源代码中 ...
- 通过ILSpy反编译工具和ilasm修改.NET程序
文章来源:https://blog.peos.cn/2016/12/26/ilspy-ilasm-ildasm-net.html 金庸群侠传X中,田青文.木婉清.王语嫣的点穴游戏忒难过了,所以上网摸索 ...
- window 消息传递机制【复杂版本】
一.消息概述 众人周知,window系统是一个消息驱动的系统, windows操作系统本身有自己的消息队列称做系统消息队列(操作系统队列),消息循环,它捕捉键盘,鼠标的动作生成消息,并将这个消 ...
- Pandas：读取数据库read_sql
学习自:pandas.read_sql - pandas 1.2.4 documentation (10条消息) pd.read_sql()参数详解_pandas.read_csv()参数详解-CSD ...
- shell 和python 实现ftp文件上传或者下载
一.shell脚本 #####从ftp服务器上的/home/data 到 本地的/home/databackup#####!/bin/bashftp -n<<!open 172.168.1 ...
- Win10系统设置开机自启动
有时候,我们想设置某些软件开机时自动启动,操作步骤如下: 1. win+R 同时按住键盘上的win和R键打开运行窗口 2. shell:startup 输入shell:startup后回车 3. 添加 ...
- CSAPP-Lab01 Data Lab 记录
总览 Problem-int bitXor bitXor - x^y using only ~ and & Example: bitXor(4, 5) = 1 Legal ops: ~ &am ...
- tensorflow源码解析之common_runtime-session
目录 核心概念 session session_factory 1. 核心概念 session可以认为是一个执行代理.我们在客户端构建计算图,提供输入,然后把计算图丢给session去执行.因此,se ...
- java方法学习
java方法学习 方法概念 什么是方法 方法就是完成某些事情的过程,如:实现两个数相加,用方法add(数值1,数值2). 1.System.out.print(),System是系统的一个类,out是 ...
- ubuntu 16.04和18.04 忘记登录密码的解决办法
1:开机按Shift键,出现如下界面.(手速要快,Shift键要按时间久一点)选择第二项 2:按回车键进入如下界面,然后选中有recovery mode的选项(第三项) 3:按e进入如下界面,并找到图 ...