方案一
多行文本框接收到復制的excel值后,在文本框的chage事件中,將excel內容分割到二維數組中,然后填充到html的表格的input或textarea中。
數據格式: 單元格復制后的數據格式為"設備\t缺陷類型\r\n水壓堵閥\t母材裂紋"。
注釋:單元格之間通過"\t"分隔,行間通過"\r\n"分隔。數據必須粘貼到<textarea>多文本框中,如果是<input>控件換行符"\r\n"會被刪除掉。表格中要使用<textarea>接收數據,
$(function () { $("textarea").on("change", function () { var str = $(this).val(); var rowStrArray = str.split("\n"); var rows = []; for (var i = 0; i < rowStrArray.length; i++) { var row = []; var tdStrArray = rowStrArray[i].split('\t'); for (var j = 0; j < tdStrArray.length; j++) { row.push(tdStrArray[j]); } rows.push(row); } var startTr = $(this).parents("tr:first"); var startTd = $(this).parents("td:first"); var trIndex = -1; var tdIndex = -1; $("tr").each(function (i, tr) { if (tr == startTr[0]) { trIndex = i; } $(tr).find("td").each(function (j, td) { if (td == startTd[0]) { tdIndex = j; } if (trIndex != -1 && tdIndex != -1 && i >= trIndex && j >= tdIndex) { var rowsIndex = i - trIndex; if (rowsIndex < rows.length) { var row = rows[rowsIndex]; var rowIndex = j - tdIndex; if (rowIndex < row.length) { var val = rows[rowsIndex][rowIndex]; $(td).find("textarea").val(val); } } } }); }) }); });
方案二:優化方案
粘貼事件發生的時候,獲取剪切板的內容,將復制的excel內容分割到二維數組中,然后填充到html的表格的input或textarea中。
var CopyExcel = function (tableId) { $("#" + tableId).find("input,textarea").on("paste", function (e) { var pastedText = undefined; if (window.clipboardData && window.clipboardData.getData) { // IE pastedText = window.clipboardData.getData('Text'); } else { //e.clipboardData.getData('text/plain'); pastedText = e.originalEvent.clipboardData.getData('Text'); } //阻止粘貼事件的默認行為 e.preventDefault(); var str = pastedText; var rowStrArray = str.split("\r\n"); var rows = []; for (var i = 0; i < rowStrArray.length; i++) { var row = []; var tdStrArray = rowStrArray[i].split('\t'); for (var j = 0; j < tdStrArray.length; j++) { row.push(tdStrArray[j]); } rows.push(row); } var startTr = $(this).parents("tr:first"); var startTd = $(this).parents("td:first"); var trIndex = -1; var tdIndex = -1; $("tr").each(function (i, tr) { if (tr == startTr[0]) { trIndex = i; } $(tr).find("td").each(function (j, td) { if (td == startTd[0]) { tdIndex = j; } if (trIndex != -1 && tdIndex != -1 && i >= trIndex && j >= tdIndex) { var rowsIndex = i - trIndex; if (rowsIndex < rows.length) { var row = rows[rowsIndex]; var rowIndex = j - tdIndex; if (rowIndex < row.length) { var val = rows[rowsIndex][rowIndex]; $(td).find("input,textarea").val(val); } } } }); }) }); }