最近有一个后台管理的功能,需要将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>
分享到:
相关推荐
4. **快捷菜单**:vxe-table内置了快捷菜单功能,用户可以通过右键点击单元格或行触发,提供快速的操作选项,如复制、剪切、粘贴等,提高了操作效率。 5. **数据校验**:组件提供了数据校验机制,可以设置列级别的...
在JavaScript中,有时我们需要实现一个功能,让用户能够方便地复制网页上的特定内容到剪贴板。这个过程可以通过JavaScript的API来实现,虽然不同浏览器的实现方式可能会有所不同。下面我们将详细探讨如何使用...
这个"createTable.zip"压缩包文件包含了一个关于如何在Qt中构建类似功能的项目,特别是实现了剪切、复制和粘贴等常见操作。让我们深入探讨一下在Qt中创建表格及其相关功能的实现。 首先,Qt提供了一个名为`...
8. **“合并计算”表(consolidation table)**: 将多个数据区域的数据汇总到一个单一的位置,可以用于跨工作表或工作簿的数据汇总。 9. **比较条件(comparison criteria)**: 在条件格式或过滤器中使用的标准,用来...
14. 复制区域:要复制Excel中的一个区域,可以按Ctrl+C组合键将内容放入剪贴板。 15. 内嵌式图表创建:通过“图表”工具栏中的“图表类型”按钮可以创建最简单的内嵌式图表。 16. 填充功能:当输入的数据有内在...
English | 介绍 :rocket: Luckysheet是像excel这样的在线电子表格,功能强大,易于配置且完全开源。 链接 ...操作:撤消,重做,复制,粘贴,剪切,热键,格式刷,拖放选择 公式和函数:内置,远程
文本对齐和旋转,文本截断,溢出,自动换行,多种数据类型,单元格分割样式单元格:拖放,填充手柄,多项选择,查找和替换,定位,合并单元格,数据验证行和列:隐藏,插入,删除行或列,冻结和拆分文本操作:...
- **剪贴板 (Clipboard)**:用于处理剪切、复制和粘贴操作。 - **字体 (Font)**:调整文本的字体、字号、颜色等属性。 - **段落 (Paragraph)**:调整段落对齐方式、行距、缩进等。 - **样式 (Styles)**:应用...
25. Word删除文本:单击“剪切”按钮不能删除已选中的大块文本,因为“剪切”是剪切到剪贴板而非删除。 26. Word打印:在同一页上,无法同时设置纵向和横向打印;打印预览可以显示多页。 27. 第一台电子数字计算机...
25. 删除Word文本:单击“常用”工具栏中的“剪切”按钮可以删除已选中的大块文本,选项D不正确,因为剪切实际上只是将内容移除到剪贴板,而非彻底删除。 26. Word打印:在同一页上,无法同时设置纵向和横向打印,...
33. **剪切板内容**:剪贴板通常用于暂存剪切或复制的内容,以便在不同位置粘贴。 34. **Excel求和**:在Excel中,对A1和B2单元格求和的公式是`=SUM(A1, B2)`。 以上是对题目涉及知识点的详细解释,涵盖了计算机...
总结起来,Qt 5表格编辑器是一个利用Qt框架构建的、功能强大的工具,它通过`QTableView`和`QTableWidget`组件实现了类似Excel的表格操作,并且通过`QClipboard`支持了复制、粘贴和剪切等核心功能。这样的编辑器通常...
12. 剪贴板:Windows98中的剪贴板是内存中一个临时存储区域,用于暂存复制或剪切的数据。 13. 电子邮件发送文件:通过电子邮件发送文件通常需要使用“附加文件”功能,将文件作为附件发送。 14. 窗体操作:执行`...
24. Excel2000操作:在单元格中直接修改数据(选项A正确)、使用“清除”命令(选项B正确)、按Del键(选项D正确)都可以操作数据;而使用“删除”命令,操作对象是单元格本身(选项C正确)。 25. Word2000删除文本...