最近整理了个js,解决了excel导入读取数据遇到的种种问题

做项目需要导入excel文件,导入的时候总会用到公式,宏等导致的导入数据失败

所以就想,能不能让用户把excel文档中的内容全选,然后粘贴到网页上用form提交,所以写了如下js

对第一个input单元格,获得焦点后点击ctrl+V,就会将excel文档复制到网页上

<html>

	<head>
		<script type="text/javascript" src="/jquery/jquery-1.4.2.min.js"></script>
	</head>
	<body>
		<table id="drsj">
			<tr>
				<td>
					<input type="text" name="XM" />
				</td>
				<td>
					<input type="text" name="NSR_MC" />
				</td>
				<td>
					<input type="text" name="SFZZLX" />
				</td>
				<td>
					<input type="text" name="SFZZHM" />
				</td>
				<td>
					<input type="text" name="GJ" />
				</td>
				<td>
					<input type="text" name="SKSSQ" />
				</td>
				<td>
					<input type="text" name="SDXM" />
				</td>
				<td>
					<input type="text" name="SRE" />
				</td>
				<td>
					<input type="text" name="MSSRE" />
				</td>
				<td>
					<input type="text" name="YXKCSE" />
				</td>
				<td>
					<input type="text" name="FYKCBZ" />
				</td>
				<td>
					<input type="text" name="ZYKCJZE" />
				</td>
				<td>
					<input type="text" name="SNSDSE" />
				</td>
				<td>
					<input type="text" name="SL" />
				</td>
				<td>
					<input type="text" name="SSKCS" />
				</td>
				<td>
					<input type="text" name="YKSE" />
				</td>
				<td>
					<input type="text" name="YJSE" />
				</td>
				<td>
					<input type="text" name="BZ" />
				</td>
			</tr>
		</table>
		<div id="ztmb" style="display: none;">

			<table>
				<tr>
					<td>
						<input type="text" name="XM" />
					</td>
					<td>
						<input type="text" name="NSR_MC" />
					</td>
					<td>
						<input type="text" name="SFZZLX" />
					</td>
					<td>
						<input type="text" name="SFZZHM" />
					</td>
					<td>
						<input type="text" name="GJ" />
					</td>
					<td>
						<input type="text" name="SKSSQ" />
					</td>
					<td>
						<input type="text" name="SDXM" />
					</td>
					<td>
						<input type="text" name="SRE" />
					</td>
					<td>
						<input type="text" name="MSSRE" />
					</td>
					<td>
						<input type="text" name="YXKCSE" />
					</td>
					<td>
						<input type="text" name="FYKCBZ" />
					</td>
					<td>
						<input type="text" name="ZYKCJZE" />
					</td>
					<td>
						<input type="text" name="SNSDSE" />
					</td>
					<td>
						<input type="text" name="SL" />
					</td>
					<td>
						<input type="text" name="SSKCS" />
					</td>
					<td>
						<input type="text" name="YKSE" />
					</td>
					<td>
						<input type="text" name="YJSE" />
					</td>
					<td>
						<input type="text" name="BZ" />
					</td>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript">  
    //借助js操作剪切板内容,完成Excel多单元格数据 到 Html table对应单元格的复制
    //为每个text控件定义“获得输入焦点”和“失去焦点”时的样式   
    $("input[type='text']").focus(function(){   
             $(this).css({"background-color":"#FFFFE0"});    
        }).blur(function(){   
             $(this).css({"background-color":"white"});   
        });   
    //jquery中未对onpaste事件(即粘贴事件)进行封装,只好采用js原有的方式为每个text控件绑定onpaste事件   
    $.each($("input[type='text']"),function(obj,index){  
         this.onpaste = readClipboardData;   
      });   
      //获取剪切板数据 函数   
    function getClipboard() {   
        if (window.clipboardData) {   
            return (window.clipboardData.getData('Text'));   
        }   
        else if (window.netscape) {   
            netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');   
            var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);   
            if (!clip) return;   
            var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);   
            if (!trans) return;   
            trans.addDataFlavor('text/unicode');   
            clip.getData(trans, clip.kGlobalClipboard);   
            var str = new Object();   
            var len = new Object();   
            try {   
                trans.getTransferData('text/unicode', str, len);   
            }   
            catch (error) {   
                return null;   
            }   
            if (str) {   
                if (Components.interfaces.nsISupportsWString) strstr = str.value.QueryInterface(Components.interfaces.nsISupportsWString);   
                else if (Components.interfaces.nsISupportsString) strstr = str.value.QueryInterface(Components.interfaces.nsISupportsString);   
                else str = null;   
            }   
            if (str) {   
                return (str.data.substring(0, len.value / 2));   
            }   
        }   
        return null;   
    }   
    //读取剪切板数据,并将剪切板数据存放于各table cell中   
    function readClipboardData() {
        var str = getClipboard(); //获取剪切板数据   
        var len = str.split("\n");//获取行数   
        //var tdIndex = $(this).parent().index(); //获取当前text控件的父元素td的索引   
        //var trIndex = $(this).parent().parent().index(); //获取当前text控件的父元素的父元素tr的索引   
        var trStr;   
   		//从excle表格中复制的数据,最后一行为空行,因此无需对len数组中最后的元素进行处理 
   		if(len!=null&&len.length>1){
   			var newTr;
   			var dqLenth=$("#drsj").find("tr").length;
   			for(var i=0;i<len.length-dqLenth-1;i++){
   				newTr=document.getElementById("drsj").insertRow($("#drsj").find("tr").length);
   				var mxTr=$("#ztmb").find("tr").html();
				$(newTr).html(mxTr);
   			}
   			dqLenth=$("#drsj").find("tr").length;
   			var detailTable=document.getElementById("drsj");
   			for(var i=dqLenth;i>len.length-2;i--){
   				try{
   				detailTable.deleteRow(i);
   				}catch(e){}
   			}
   			for(var i=0;i<len.length-1;i++){
	           //excel表格同一行的多个cell是以空格 分割的,此处以空格为单位对字符串做 拆分操作。。   
	           trStr = len[i].split(/\s+/); 
	           if(trStr.length!=18){
	           	//	alert("内容行中,第"+(i+1)+"行数据错误,单元格中不能存在空数据,如为空请填充0");
	           }   
	            for(var j=0;j<=trStr.length-1;j++){ //将excel中的一行数据存放在table中的一行cell中   
	                $("tr:eq("+i+")").children("td:eq("+(j)+")").children().val(trStr[j]);   
	            }   
	        } 
        }
      return false; //防止onpaste事件起泡   
    }   
  </script>
</html>
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值