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

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

以前没有写过这种脚本，不过想起来前不久刚看到一个脚本可以实现全选HTML编辑器的内容，于是想到一个方案：使用脚本将该表格插入HTML编辑器中，然后全选HTML编辑器内容，执行HTML编辑器的复制命令，即可实现复制表格功能，很快搞定：

测试










测试表格 测试表格
测试表格 测试表格
文字

"); // 初始化编辑器
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); // 粘贴
}
//-->

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

这样子功能是实现了，不过觉得有点不爽，必须借助HTML编辑器才可，不过从全选HTML编辑器的代码中，注意到了createTextRange()方法，这个方法以前就有用过，只是一直没深入研究过。在Msdn中发现只有Body、TextArea等对象支持createTextRange()方法，继续在msdn中仔细查阅了一下，createTextRange()返回的是一个 TextRange 对象，继续查阅 TextRange 对象，发现其有很多方法，先试了试findText方法，发现只能选中文字，不能选中对象，继续找，终于发现了moveToElementText就是我们要找的方法：

测试










测试表格 测试表格
测试表格 测试表格
文字

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

类似于这样的问题，可以想想以前有无写过见过类似的代码，如果没有也可以网上用关键字搜索一把，直接利用现有知识解决。msdn是一个非常好的宝库，就如小学学汉字的字典一样，从里面可以找到绝大部分所需要的资料。正应了那句话，自己动手丰衣足食：）

赞 (0)

相关推荐

  • JS实现表格数据各种搜索功能的方法

    本文实例讲述了JS实现表格数据各种搜索功能.可忽略大小写,模糊搜索,多关键搜索.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html>  <head>   <meta charset="utf-8">   <title></title>   <script type="text/javascript">    window.onl

  • 解析js原生方法创建表格效率测试

    我们先看一下三种算法以及在各种浏览器下的表现.第一种: 直接操作dom. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>     

  • js生成动态表格并为每个单元格添加单击事件的方法

    html: 复制代码 代码如下: <html> <head> <title>Demo</title> </head> <body> <label style="font-size:20px;width:600px;" >动态表格:</label><br/> <table border="1"> <tbody id="table&qu

  • JS控制表格实现一条光线流动分割行的方法

    本文实例讲述了JS控制表格实现一条光线流动分割行的方法.分享给大家供大家参考.具体分析如下: 这是很漂亮的一个分割行的代码. 其实就是利用JS控制表格实现的一条七彩流光分割横线 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>js用单元格实现的七彩线条</tit

  • JS控制网页动态生成任意行列数表格的方法

    本文实例讲述了JS控制网页动态生成任意行列数表格的方法.分享给大家供大家参考.具体分析如下: 这是一个非常简单使用的JS在线生成表格的代码效果 通过JS功能代码,直接输入行数和列数就可以自动生成你需要的表格 当然你也可以扩展JS代码实现生成文字的各种形式 复制代码 代码如下: <html> <head> <title>Js动态生成表格</title> <style type="text/css"> table{font-siz

  • JS实现鼠标点击展开或隐藏表格行的方法

    本文实例讲述了JS实现鼠标点击展开或隐藏表格行的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • JS实现网页表格自动变大缩小的方法

    本文实例讲述了JS实现网页表格自动变大缩小的方法.分享给大家供大家参考.具体分析如下: 这就是一个个性的动态表格效果代码,网页中的表格自动放大或者缩小,不停的变化 主要就是一个强调显示的作用 复制代码 代码如下: <HTML> <HEAD> <TITLE>js会动的表格</TITLE> <META content="text/html; charset=hz-gb-2312" http-equiv=Content-Type>

  • 不到30行JS代码实现Excel表格的方法

    不到30行JS代码实现Excel表格的方法

    本文实例讲述了不到30行JS代码实现Excel表格的方法,可见jQuery并非不可替代.分享给大家供大家参考.具体分析如下: 某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性: ① 由不足30行的原生JavaScript代码实现 ② 不依赖第三方库 ③ Excel风格的语义分析 (公式以 "=" 开头) ④ 支持任意表达式 (=A1+B2*C3) ⑤ 防止循环引用 ⑥ 基于localStorage的自动本地持久化存储 效果展示如下图所示: 代码分析:

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

    今天有人问我一个问题:如何通过js脚本复制网页上的一个表格?看起来似乎比较有难度,不过还是搞定了,顺便把解决这个问题的过程记录下来,希望能对写脚本的兄弟们有所帮助. 以前没有写过这种脚本,不过想起来前不久刚看到一个脚本可以实现全选HTML编辑器的内容,于是想到一个方案:使用脚本将该表格插入HTML编辑器中,然后全选HTML编辑器内容,执行HTML编辑器的复制命令,即可实现复制表格功能,很快搞定: 测试 测试表格 测试表格 测试表格 测试表格 文字 "); // 初始化编辑器 editor.doc

  • 通过JavaScript脚本复制网页上的一个表格

    测试 测试表格 测试表格 测试表格 测试表格文字 "); // 初始化编辑器 editor.document.body.innerHTML = obj.outerHTML; editor.document.body.createTextRange().select(); // 选中编辑器内所有内容 editor.document.execCommand("copy","",null); // 复制 } function PastClipboardData(

  • js+数组实现网页上显示时间/星期几的实用方法

    复制代码 代码如下: <html> <head> <script type="text/javascript"> function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds() // add a zero in front of numbers<10 m=checkTime(m

  • 如何利用 JS 脚本实现网页全自动秒杀抢购功能

    倒计时页面: 倒计时未结束时,购买按钮还不能点击. 结束时,可以点击购买,点击后出现提示"付款成功" 展示效果 GIF 1.制作测试网页 首先我们来做一个简易的抢购页面 <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Apple</title> <style type=&q

  • js实现在网页上简单显示时间的方法

    本文实例讲述了js实现在网页上简单显示时间的方法.分享给大家供大家参考.具体如下: 这是一款网页时钟JS代码,纯javascript实现,显示时.分.秒.网页时间显示.网页时钟有很多,这个真的挺简易的,美工好的朋友可在此基础上进一步美化完善 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr

  • JS实现在网页中弹出一个输入框的方法

    本文实例讲述了JS实现在网页中弹出一个输入框的方法.分享给大家供大家参考.具体分析如下: 习惯了使用早期给电脑文件夹设置密码的朋友一定还记得那种弹出一个输入框,然后让你输入密码在登录查看的效果吧,这个JS代码就是实现这个在当前页面中弹出一个输入框,当然你可以输入任何东西 <html> <head> <title>js输入对话框</title> </head> <body> <script language="javas

  • JS脚本实现动态给标签控件添加事件的方法

    本文实例讲述了JS脚本实现动态给标签控件添加事件的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • IE浏览器下JS脚本提交表单后，不能自动提示问题解决方法

    IE浏览器下JS脚本提交表单后，不能自动提示问题解决方法

    本文实例讲述了IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法.分享给大家供大家参考,具体如下: 经常我们用表单提交东西,在提交后,浏览器会自动记录你输入的东西,下次你再输入的时候,可以重新选择,但是如果你是用IE的话,这里有一个BUG, 其他浏览器没有这个问题.当然首先你得设置IE 浏览器选项是可以记录表单数据的,然后写一段代码来测试. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> &

  • 通过Element ui往页面上加一个分页导航条的方法

    通过Element ui往页面上加一个分页导航条的方法

    需求 加入一个分页条,此分页条可以跳转页面,可以根据页码选择具体页面,可以设置当前页面的大小. 在element ui官网选择Pagination分页组件 进入element ui官网,然后选择一个合适的分页组件,如下图: UserList.vue组件的template模板中的分页组件的代码和效果 分页组件的代码如下图: 分页组件的效果如下图: 分页组件牵涉到的data数据和methods方法 分页组件牵涉到的data数据如下图: 分页组件牵涉到的methods方法如下图: 测试 首先进入首页,

  • JS实现的网页上的颜色拾色器

    使用Js代码编写一个网页上用的颜色拾色器,也就是选择颜色用的,用鼠标单击任意颜色块,将弹出颜色值,当你想使用某种颜色而不知道颜色值的时候,用这个小特效可以告诉你颜色值是多少,比较方便. 颜色拾色器 红 绿 蓝 灰 用鼠标单击下面的颜色块,将弹出颜色值 for(i=0;i '+ishex(i*17) +' ') document.all['Ltd' + i].num=i } function ishex(which){ return which.toString(16); } document.w

随机推荐