html填充表格数据,excel数据复制到html表格中

方案一

多行文本框接收到复制的excel值后，在文本框的chage事件中，将excel内容分割到二维数组中，然后填充到html的表格的input或textarea中。

数据格式： 单元格复制后的数据格式为"设备\t缺陷类型\r\n水压堵阀\t母材裂纹"。

注释：单元格之间通过"\t"分隔，行间通过"\r\n"分隔。数据必须粘贴到多文本框中，如果是控件换行符"\r\n"会被删除掉。表格中要使用接收数据，

$(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);

}

}

}

});

})

});

}