利用JS脚本实现网页表格复制的两种方法

利用JS脚本实现网页表格复制的两种方法

近期有开发者询问如何利用JavaScript脚本复制网页中的表格。虽然看似复杂，但该问题已得到解决。本文记录了解决过程，旨在为从事脚本开发的同行提供参考与帮助。

基于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> 

基于TextRange对象的直接选中方案

尽管上述功能得以实现，但必须依赖HTML编辑器这一前提令人感到不便。在分析全选HTML编辑器代码时，注意到createTextRange()方法，该方法此前虽已使用过，但未深入探究。查阅Msdn文档可知，仅Body、TextArea等对象支持createTextRange()方法。进一步查阅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>文字  

面对此类问题，可回顾以往是否编写或见过类似代码；若无，也可通过关键字在线搜索，直接利用现有知识解决。Msdn文档如同学习汉字时的字典，是获取所需资料的极佳宝库，正印证了“自己动手，丰衣足食”的道理。