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
]

4. 把解析好的數據放在相應單元格

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結構會有所差異，所以在循環內給單元格賦值時要留意下有沒有問題。

小白一枚希望能夠幫到大家～如果任何的小細節有更好更優雅的實現或編碼方法，都希望大神們能在評論里指教，謝謝！