最近有一个后台管理的功能,需要将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>
分享到:
相关推荐
JavaScript复制内容到剪切板示例, JavaScript复制内容到剪切板示例代码 JavaScript复制内容到剪切板示例简单小例子
利用剪切板将DataGridView中的数据复制并粘贴到Excel文件中
js与剪切板数据互动,js从剪切板存放数据,实现复制剪切粘贴等操作
jquery复制内容到剪切板
原需求是 监视Excel表格中的关键数据,截取后做相应的业务。 工程只提取了监视功能, 使用windows 对应剪切板API。 使用方法: 1、初始化 使用 SetClipboardViewer ,把本窗口句柄传入,并且保存返回的下个窗口句柄...
使用js控制剪切板的4种方式的demo。点击按钮后,自动复制浏览器地址链接的、复制输入框内的值到剪切板。
javascript复制到剪切板,需要到web坏境下才能正常的复制!
处理剪贴板中Excel中的数据,封装成自定义的数据集,获取剪贴板中的Excel数据,并进行处理,保留空单元格,方便读取后程序处理
ios+android+h5复制剪切板
本程序为方便将文本复制到系统剪切板, 以便省去ctrl+c或者右键→复制的步骤 节省时间 联系作者:shaojimei@qq.com 将要复制的文本填入文本框,点击复制 按钮即可
网页的直接复制图片到剪切板上,然后可以直接粘贴到微信,QQ上
剪切板 网页操作 c++ 剪切板 网页操作 vc
一般复制的是文件,这个是复制内容,复制的文件不能直接复制到剪切板,我这个可以
JS表单元格选择器 JS库允许您选择HTML表格的单元格以及清理,复制,剪切和粘贴表格数据。 支持复制/剪切/粘贴到电子表格,例如Microsoft Excel,Google Docs,LibreOffice和OpenOffice。演示版参见。设置带有...
这是一个获取剪切板复制文件路径和文件的源程序,可以把剪切板的内容显示出来并入数据。该程序已模块化,用于做网络监控软件,使用方便。
C#获取剪切板内容
通过Java代码与系统剪切板交互,可以获得剪切板内容,也可以向剪切板中添加内容
clipboard.js 使用纯 JavaScript (无需 Flash)实现了复制浏览器内容到系统剪切板的功能,可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+。
HTML用clipboard.js实现复制到剪切板,提示 每个应用程序都有不同的设计需求,这就是为什么clipboard.js不包含任何CSS或内置的工具提示解决方案。
# python读取剪切板内容 import win32clipboard as w import win32con def get_text(): w.OpenClipboard() d = w.GetClipboardData(win32con.CF_TEXT) w.CloseClipboard() return d.decode('GBK') de