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:
-
通过制表符和换行符解析数据,先通过换行符将不同行数组分开成数组,再把每个单元格数据通过制表符分开,同样构造成数组。
//解析数据
var arr = data.split('
')
.filter(function(item) { //兼容Excel行末
,防止出现多余空行
return (item !== "")
}).map(function(item) {
return item. split(" ");
});
//最终数据模式
[
[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(/ /g, '\t').replace(/
/g, '\n')); //data转码
//解析数据
var arr = data.split('
')
.filter(function(item) { //兼容Excel行末
,防止出现多余空行
return (item !== "")
}).map(function(item) {
return item. split(" ");
});
//输出至网页表格
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
}
}
});
只要把这一段绑在表格上,就可以华丽丽的实现多单元格复制啦~不过因为table单元格内的dom结构会有所差异,所以在循环内给单元格赋值时要留意下有没有问题。
小白一枚希望能够帮到大家~如果任何的小细节有更好更优雅的实现或编码方法,都希望大神们能在评论里指教,谢谢!