Html table 实现Excel多格粘贴

Html table 实现Excel多格粘贴

电商网站的后台总少不了各种繁杂数据的录入，旁边的运营妹子录完第138条商品的时候，终于忍不住转身吼到：为什么后台的录入表不能像Excel那样多行粘贴！！！于是，就有了这片文章～

实现的就是这样的一个效果，从Excel或Number复制好多行数据后，直接在table起始单元格按下C+V，表格数据立马就齐刷刷站好位了！强迫症表示看着好爽感！

简单到不行的原理：给表格元素绑定粘贴事件，做到这四件事就可以啦(案例代码依赖jquery框架):

1. 消除默认粘贴事件

   e.preventDefault();

2. 获取粘贴板上的数据

   var data = null;  
   var clipboardData = window.clipboardData || e.originalEvent.clipboardData; // IE || chrome  
   data = clipboardData.getData('Text');

   复制出来的数据是用制表符\t和换行符\n隔开的数据，显示出来是带空格的一系列字符串，如果在调试时想要清楚的查看带\t,\n的字符串，可以把字符串\t\n替换成成\\t \\n：
   

3. 通过制表符和换行符解析数据，先通过换行符将不同行数组分开成数组，再把每个单元格数据通过制表符分开，同样构造成数组。

//解析数据
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
]

1. 把解析好的数据放在相应单元格

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！