凭借js操作剪切板内容，完成Excel多单元格数据到 Html table对应单元格的复制 _HTML/CSS

借助js操作剪切板内容，完成Excel多单元格数据到 Html table对应单元格的复制

?????? 最近有一个后台管理的功能，需要将excel表格中的数据一次性复制到html table中，最后点击提交按钮，将table中的数据提交到服务器端进行处理。

?????? 涉及到的技术难点有两块:如何通过js得到剪切板中的数据、如何js将剪切板中的数据存放在多个table cell中。

?????? 当然最恶心的莫过于要自己写CSS样式表。

????? 接下来看代码吧：

<!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) str = str.value.QueryInterface(Components.interfaces.nsISupportsWString);
                else if (Components.interfaces.nsISupportsString) str = 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+/); 
            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>

凭借js操作剪切板内容，完成Excel多单元格数据 到 Html table对应单元格的复制

凭借js操作剪切板内容，完成Excel多单元格数据到 Html table对应单元格的复制