Html table 實現Excel多格粘貼

電商網站的后臺總少不了各種繁雜數據的錄入，旁邊的運營妹子錄完第138條商品的時候，終于忍不住轉身吼到：為什么后臺的錄入表不能像Excel那樣多行粘貼！！！于是，就有了這片文章～

實現的就是這樣的一個效果，從Excel或Number復制好多行數據后，直接在table起始單元格按下C+V，表格數據立馬就齊刷刷站好位了！強迫癥表示看著好爽感！

簡單到不行的原理：給表格元素綁定粘貼事件，做到這四件事就可以啦(案例代碼依賴jquery框架):

消除默認粘貼事件

e.preventDefault();

獲取粘貼板上的數據

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

復制出來的數據是用制表符\t和換行符\n隔開的數據，顯示出來是帶空格的一系列字符串，如果在調試時想要清楚的查看帶\t,\n的字符串，可以把字符串\t\n替換成成\\t \\n：

通過制表符和換行符解析數據，先通過換行符將不同行數組分開成數組，再把每個單元格數據通過制表符分開，同樣構造成數組。

//解析數據 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 ]

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

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

總結

以上是生活随笔為你收集整理的Html table 实现Excel多格粘贴的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。