凭借js操作剪切板内容，完成Excel多单元格数据 到 Html table对应单元格的复制
日期：2014-05-17 浏览次数：20652 次
借助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"/&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
