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

小白一枚但愿可以帮到你们～若是任何的小细节有更好更优雅的实现或编码方法，都但愿大神们能在评论里指教，谢谢！