拷贝Excel多行多列,粘贴至HTML后自动生成多个文本框
<!DOCTYPE html>
<html>
<head>
<title>copytablehtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../jquery/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="div1">请选中我,然后粘贴</div>
<script>
var tableNode;
$('#div1').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");
});
tableNode=document.createElement("table");//获得对象
var row=arr.length;
var cols=arr[0].length;
for(var x=0;x<row;x++){
var trNode=tableNode.insertRow();
for(var y=0;y<cols;y++){
var tdNode=trNode.insertCell();
//tdNode.innerHTML="单元格"+(x+1)+"-"+(y+1);
tdNode.innerHTML="<input type='text' name='tname_"+(x+1)+"_"+(y+1)+"' value='"+arr[x][y]+"'/>";
}
}
document.getElementById("div1").appendChild(tableNode);//添加到那个位置
});
</script>
</body>
</html>