借助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"/></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="保存" 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>?