日期:2014-05-17  浏览次数:20597 次

借助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"/&