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;  //表格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结构会有所差异，所以在循环内给单元格赋值时要留意下有没有问题。

小白一枚希望能够帮到大家～如果任何的小细节有更好更优雅的实现或编码方法，都希望大神们能在评论里指教，谢谢！