通过js脚本复制网页上的一个表格的不错实现方法


答案：今天有人问我一个问题：如何通过js脚本复制网页上的一个表格？看起来似乎比较有难度，不过还是搞定了，顺便把解决这个问题的过程记录下来，希望能对写脚本的兄弟们有所帮助。 

以前没有写过这种脚本，不过想起来前不久刚看到一个脚本可以实现全选HTML编辑器的内容，于是想到一个方案：使用脚本将该表格插入HTML编辑器中，然后全选HTML编辑器内容，执行HTML编辑器的复制命令，即可实现复制表格功能，很快搞定：
<INPUT TYPE="button" value="复制测试表格" onclick="CopyTable()"> 
<INPUT TYPE="button" value="将剪切板内容输出到编辑器中" onclick="PastClipboardData()">
 
测试 
<TABLE border="1" id="oTable"> 
<TR> 
 <TD>测试表格</TD> 
 <TD>测试表格</TD> 
</TR> 
<TR> 
 <TD>测试表格</TD> 
 <TD>测试表格</TD> 
</TR> 
</TABLE>文字

 
<iframe id="editor" src="about:blank"></iframe> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function CopyTable() 
{ 
 CopyHtmlElement(oTable) 
} 
  
function CopyHtmlElement(obj) 
{ 
 editor.document.designMode = 'On'; // 将iframe变成可编辑模式,即HTML编辑器 
 editor.document.write("<body></body>");  // 初始化编辑器 
 editor.document.body.innerHTML = obj.outerHTML; 
 editor.document.body.createTextRange().select(); // 选中编辑器内所有内容 
 editor.document.execCommand("copy","",null); // 复制 
} 
function PastClipboardData() 
{ 
 editor.focus(); 
 editor.document.execCommand("paste","",null); // 粘贴 
} 
//--> 
</SCRIPT>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

这样子功能是实现了，不过觉得有点不爽，必须借助HTML编辑器才可，不过从全选HTML编辑器的代码中，注意到了createTextRange()方法，这个方法以前就有用过，只是一直没深入研究过。在Msdn中发现只有Body、TextArea等对象支持createTextRange()方法，继续在msdn中仔细查阅了一下，createTextRange()返回的是一个 TextRange 对象，继续查阅 TextRange 对象，发现其有很多方法，先试了试findText方法，发现只能选中文字，不能选中对象，继续找，终于发现了moveToElementText就是我们要找的方法：
<INPUT TYPE="button" value="选中测试表格" onclick="CopyTable()"> 
测试 
<TABLE border="1" id="oTable"> 
<TR> 
 <TD>测试表格</TD> 
 <TD>测试表格</TD> 
</TR> 
<TR> 
 <TD>测试表格</TD> 
 <TD>测试表格</TD> 
</TR> 
</TABLE>文字 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function CopyTable() 
{ 
 var txt = document.body.createTextRange(); 
 txt.moveToElementText(oTable); 
 txt.select(); 
} 
//--> 
</SCRIPT> 

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

类似于这样的问题，可以想想以前有无写过见过类似的代码，如果没有也可以网上用关键字搜索一把，直接利用现有知识解决。msdn是一个非常好的宝库，就如小学学汉字的字典一样，从里面可以找到绝大部分所需要的资料。正应了那句话，自己动手丰衣足食：）
上一个：经典的解除许多网站无法复制文字的绝招
下一个：另类调用flash无须激活的方法
更多图片编程知识: