将Excel单元格复制后，通过剪切板然后粘贴到页面上的table表中

最新推荐文章于 2023-10-24 22:06:49 发布
zou_hailin226
最新推荐文章于 2023-10-24 22:06:49 发布
阅读量5.1k
点赞数
分类专栏： JSP JS、JQuery、Freemarker、ExtJS
本文链接：https://blog.csdn.net/zou_hailin226/article/details/8129452
版权
JSP 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
JS、JQuery、Freemarker、ExtJS
8 篇文章 0 订阅
订阅专栏
这个例子兼容性不怎么样，不推荐使用，只支持IE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=GBK">  
<script src="http://code.jquery.com/jquery-1.7.1.min.js" language="javascript"></script>  
<style type="text/css">  
body{  
  background-color: white;  
  margin: 0;  
  padding: 0;  
}  
table {    
    width:95%;  
    padding: 0;    
    margin-left:30px;   
    text-align: center;  
}    
th {    
    font: 15px "trebuchet ms", '楷体_GB2312';    
    color: #4f6b72;    
    border-right: 1px dashed #c1dad7;    
    border-bottom: 1px dashed #c1dad7;    
    border-top: 1px dashed #c1dad7;    
    letter-spacing: 2px;    
    text-transform: uppercase;    
    background: #cae8ea;   
    margin: 0;   
}    
td {    
    border-right: 1px dashed #c1dad7;    
    border-top: 1px dashed #c1dad7;   
    border-bottom: 1px dashed #c1dad7;    
    background: #fff;    
    font-size:12px;    
    color: #4f6b72;    
    margin: 0;  
}   
.btn_03{  
    background-attachment: scroll;  
    background-clip: border-box;  
    background-color:  #cae8ea;  
    background-origin: padding-box;  
    background-size: auto auto;  
    width: 65px;  
}  
.error{  
 width: 12%;  
 vertical-align: top;  
}  
input{  
  padding: 0;  
  margin: 0;  
  border: 0;  
  background: white;  
  width: 100%;  
  height:100%  
}  
  
</style>  
</head>  
  <br/>  
      <!--table表单用于存放从excel单元格中复制的数据，为了便于编辑，在每个table cell中放置一个text控件-->  
      <table cellpadding="0" cellspacing="0" >  
        <tr>
			<th width="5%">data1</th>
			<th width="5%">data2</th>
			<th width="5%">data3</th>
			<th width="5%">data4</th>
			<th width="10%">data5</th>
			<th width="10%">data6</th>
			<th width="20%">data7</th>
			<th width="40%">data8</th>
		</tr>  
           <tr><td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
           </tr>  
              <tr><td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
           </tr>  
              <tr><td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
           </tr>  
              <tr><td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
           </tr>  
              <tr><td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
           </tr>  
              <tr><td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
               <td><input type="text"/></td>  
           </tr>  
              
      </table>  
      <br/>  
      <br/>  
      <div style="width: 95%;text-align: center;">
		<input type="button" value="保存" class="btn_03" id="save"/>
	  </div>  
</body>  
<script type="text/javascript">  
   
    //为每个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数组中最后的元素进行处理  
  for(var i=0;i<len.length-1;i++){  
           //excel表格同一行的多个cell是以空格 分割的，此处以空格为单位对字符串做 拆分操作。。  
           trStr = len[i].split(/\s+/);//如果使用'\t'可以保留哪些为空的单元格，使用正则表达式则去除为空的单元格/\s+/
            for(var j=0;j<=trStr.length-1;j++){ //将excel中的一行数据存放在table中的一行cell中  
                $("tr:eq("+trIndex+")").children("td:eq("+(tdIndex+j)+")").children().val(trStr[j]);  
            }  
            trIndex ++ ;  
        }  
      return false; //防止onpaste事件起泡  
    }  
      
  </script>  
</html>
图1：