拷贝Excel多行多列，粘贴至HTML后自动生成多个文本框

最新推荐文章于 2024-06-13 10:31:50 发布

转载最新推荐文章于 2024-06-13 10:31:50 发布 · 3.7k 阅读

本文介绍了一种将Excel表格内容拷贝并粘贴至HTML页面的方法，通过JavaScript实现自动转换为由多个文本框组成的表格，适用于表单填写等场景。

拷贝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>