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

小白一枚但願可以幫到你們～若是任何的小細節有更好更優雅的實現或編碼方法，都但願大神們能在評論裏指教，謝謝！