Html table 实现Excel多格粘贴
Html table 实现Excel多格粘贴
电商网站的后台总少不了各种繁杂数据的录入,旁边的运营妹子录完第138条商品的时候,终于忍不住转身吼到:为什么后台的录入表不能像Excel那样多行粘贴!!!于是,就有了这片文章~
实现的就是这样的一个效果,从Excel或Number复制好多行数据后,直接在table起始单元格按下C+V,表格数据立马就齐刷刷站好位了!强迫症表示看着好爽感!
简单到不行的原理:给表格元素绑定粘贴事件,做到这四件事就可以啦(案例代码依赖jquery框架):
消除默认粘贴事件
e.preventDefault();
获取粘贴板上的数据
var data = null; var clipboardData = window.clipboardData || e.originalEvent.clipboardData; // IE || chrome data = clipboardData.getData('Text');
复制出来的数据是用制表符\t和换行符\n隔开的数据,显示出来是带空格的一系列字符串,如果在调试时想要清楚的查看带\t,\n的字符串,可以把字符串\t\n替换成成\\t \\n:
通过制表符和换行符解析数据,先通过换行符将不同行数组分开成数组,再把每个单元格数据通过制表符分开,同样构造成数组。
//解析数据
var arr = data.split('\n').filter(function(item) { //兼容Excel行末\n,防止出现多余空行return (item !== "")}).map(function(item) {return item. split("\t");});
//最终数据模式
[[a0,a1,a2],//row1 [b0,b1,b2],//row2 [c0,c1,c2],//row3
]
- 把解析好的数据放在相应单元格
var tab = this; //表格DOM
var td = $(e.target).parents('td'); //起始单元格
var startRow = td.parents('tr')[0].rowIndex; //起始单元格行数
var startCell = td[0].cellIndex; //起始单元格列数
var rows = tab.rows.length; //总行数
for (var i = 0; i < arr.length && startRow + i < rows; i++) {var cells = tab.rows[startRow + i].cells.length; //该行总列数for(var j = 0; j < arr[i].length && startCell + j < cells; j++) {var cell = tab.rows[startRow + i].cells[startCell + j];$(cell).find(':text').val(arr[i][j]); //找到cell下的input:text,设置value}
}
需要注意的是在进行行或列的循环时,除了判断循环数i/j小于复制数据的行/列数外,还要判断当前所在行/列是否小于表格的总行/列数;
最终实现的代码如下:
$('table').bind('paste', function(e) {event.preventDefault(); //消除默认粘贴//获取粘贴板数据var data = null; var clipboardData = window.clipboardData || e.originalEvent.clipboardData; // IE || chrome data = clipboardData.getData('Text');console.log(data.replace(/\t/g, '\\t').replace(/\n/g, '\\n')); //data转码//解析数据var arr = data.split('\n').filter(function(item) { //兼容Excel行末\n,防止出现多余空行return (item !== "")}).map(function(item) {return item. split("\t");});//输出至网页表格var tab = this; //表格DOMvar td = $(e.target).parents('td');var startRow = td.parents('tr')[0].rowIndex; var startCell = td[0].cellIndex; var rows = tab.rows.length; //总行数for (var i = 0; i < arr.length && startRow + i < rows; i++) {var cells = tab.rows[startRow + i].cells.length; //该行总列数for(var j = 0; j < arr[i].length && startCell + j < cells; j++) {var cell = tab.rows[startRow + i].cells[startCell + j];$(cell).find(':text').val(arr[i][j]); //找到cell下的input:text,设置value}}
});
只要把这一段绑在表格上,就可以华丽丽的实现多单元格复制啦~不过因为table单元格内的dom结构会有所差异,所以在循环内给单元格赋值时要留意下有没有问题。
小白一枚希望能够帮到大家~如果任何的小细节有更好更优雅的实现或编码方法,都希望大神们能在评论里指教,谢谢!
转载于:https://www.cnblogs.com/daisykoo/p/5950248.html
Html table 实现Excel多格粘贴相关推荐
- html页面获取粘贴到表格,Html table 实现Excel多格粘贴
电商网站的后台总少不了各种繁杂数据的录入,旁边的运营妹子录完第138条商品的时候,终于忍不住转身吼到:为什么后台的录入表不能像Excel那样多行粘贴!!!于是,就有了这片文章- 实现的就是这样的一个效 ...
- html table转excel单元格带背景颜色
html table转excel单元格带背景颜色 在浏览器端将html的table转成Excel,可以参考下面的库 https://github.com/JackGit/table2excel.js ...
- js html table转excel文件 js获取(复制 / 粘贴板)的内容js复制table粘贴到excel中
js html table转excel文件 参考资料: 70行代码实现vue+sheetJs导出excel功能 sheetJs的git项目代码 代码太长建议直接粘贴复制 <!DOCTYPE ht ...
- html table拓宽,excel拉长单元格_excel调整单元格大小的方法步骤详解
excel在单元格中要输入的数据太多了,二单元格的位置又太小了,怎么办,excel单元格的大小改怎么调,那就有阿呼告诉你两个可靠的方法吧.希望对你有帮助! excel调整单元格大小的方法一 1.打开一 ...
- CSS设置表格行列,给bootstrap table设置行列单元格样式
1.根据单元格或者行内其他单元格的内容,给该单元格设置一定的css样式 columns: [{ field: 'index', title: '序号', align:"center" ...
- python读取excel表格-Python读取Excel单元格的内容
python读取excel的单元格返回类型 Python通过xlrd对Excel进行读取操作时,返回的数据类型(ctype)有下面5中类型: 0 – empty:空 1 – string:字符串 2 ...
- npoi 设置单元格不能修改_真巧妙!没密码也能解锁 Excel 单元格保护
大家好,我是努力hard,本文要讨论的问题,在此摘要: ① Excel工作簿保护方式 ② 无密码解锁修改单元格 00 哥,这些单元格怎么不能点开 有个好友问我,下方图片的所有绿色区域都不能选中, 我很 ...
- layui中table监听单元格_最全总结 | 聊聊 Python 办公自动化之 PPT(中)
点击上方 "AirPython",选择 "加为星标" 第一时间关注 Python 技术干货! 1. 前言 上一篇文章简单地介绍了 PPT 的文档结构,并使用 p ...
- 计算机表格复制粘贴后不变,excel表格复制粘贴后格式不变
Excel使用过程中经常需要将一个表格内容复制粘贴到其他表格中去.如果原始表格设置了行高和列宽,选中要复制的区域复制后,当在其他表格选择一个单元格进行粘贴时,行高和列宽就都变了.下面介绍excel表格 ...
最新文章
- FPGA基础知识极简教程(3)从FIFO设计讲起之同步FIFO篇
- Android输入输出机制之来龙去脉
- java:栈空间,堆空间,方法区
- Nginx映射本地json文件,配置解决浏览器跨域问题,提供前端get请求模拟数据
- 当CNI遇上Kata-KataNative的CNI扩展
- 实用动效UI素材,高效向用户展示你的app功能!
- 第三篇:命名空间namespace的用法
- eclipse不格式化注释
- 公寓这个大坑,劝大家不要再跳了
- 这4种照片千万不能保存在手机相册里,必须重视,避免损失
- 【Android】SingleTask与SingleInstance的区别
- 014-HTML-区块(不是区块链)
- 仿酷安客户端的主题切换动画效果
- 履新后首次公开亮相,实达叶成辉的“另类”创业
- UVa1646	Edge Case
- 黑科技:CSS定制多行省略 1
- 计算机温湿度控制记录,温湿度监控分析报告.doc
- 福特在华战略大披露:牵手百度发力车载OS、2021年实现首款C-V2X车型量产...
- 走出文化集體無意識,挺立中國文化主體性
- “透视小数据,营销无边界” 威脉助力企业客户重构营销策略
热门文章
- linux解决root用户无法ssh localhost的问题
- Golang协程goroutine和管道channel结合案例
- Dockerfile自定义tomcat镜像
- Scala数组元素的增加(:+)方法
- Python 一次for遍历多个列表及遍历时获取index
- Redis命令:SETNX key value(SET if Not eXists)
- thymeleaf获取当前时间并格式化输出
- 并发下HashMap头插会造成死循环情况说明
- micopython 18b20_micropython typboaed v202连接DS18B20测温小实验
- sonar的安装以及使用