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

来源：互联网发布：手机淘宝应用授权管理编辑：程序博客网时间：2024/04/27 17:13
这个例子兼容性不怎么样，不推荐使用，只支持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：
图2：
图3：