js如何实现动态克隆一个表格？

一、总结

1、通过innerHTML实现表格内容复制，

2、通过表格dom的属性（比如border）实现属性赋值，

3、通过表格dom的样式style实现样式的复制。

二、js如何实现动态克隆一个表格？

1、克隆表格案例描述

  • 实例描述：

    实现表格及其内容的复制

  • 案例要点：

    通过innerHTML可以轻松实现表格内容的复制

    表格的属性需要单独的复制

2、用到的table标签的属性

Table 对象常用属性
  • frame 设置或返回表格的外部边框。
  • rules 设置或返回表格的内部边框（行线）。
  • caption 对表格的 caption 元素的引用。
  • cellPadding 设置或返回单元格内容和单元格边框之间的空白量。
  • cellSpacing 设置或返回在表格中的单元格之间的空白量。
  • summary 设置或返回对表格的描述（概述）。
  • tFoot/tHead 返回表格的 TFoot /tHead对象。如果不存在该元素，则为 null。
  • border/width/id......

三、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>8.4 演示文档</title>

     <style type="text/css">

     </style>

 </head>

 <body>

     <table id="tab" border="1">

     <caption>表格名称</caption>

     <thead>

         <tr>

             <th colspan="3">标题1</th>

         </tr>

     </thead>

     <tbody>

         <tr>

             <td>单元格11</td>

             <td>单元格12</td>

             <td>单元格13</td>

         </tr>

         <tr>

             <td>单元格21</td>

             <td>单元格22</td>

             <td>单元格23</td>

         </tr>

         <tr>

             <td>单元格31</td>

             <td>单元格32</td>

             <td>单元格33</td>

         </tr>

         </tbody>

         <tfoot><td>备注：</td><td colspan="2"></td></tfoot>

     </table>

     <input type="button" value="复制表格" onclick="copytab()">

     <script>

     function copytab(){

         var tab=document.getElementById('tab');

         var cotab=document.createElement('table')

         cotab.innerHTML=tab.innerHTML;

         cotab.border=tab.border;

         cotab.style.marginTop='20px';

         cotab.caption.innerHTML='我是复制的'

         document.body.appendChild(cotab)

     }

     </script>

 </body>

 </html>

四、测试题-简答题

1、如何动态创建一个表格？

解答：通过document的createElement方法，然后然后将创建好的这个dom表格对象加到document的body属性中。

2、如何通过document的createElement方法创建一个表格的dom对象，createElement方法的参数是什么？

解答：var cotab=document.createElement('table') 参数是'table'

3、appendChild的作用是什么？

解答：append是附加贴上的意思，appendChild就是给某个元素贴上孩子的意思。

4、为什么需要appendChild方法？

解答：document的createElement方法创建出来的dom标签对象，如果不append到实体dom标签，那样根本就没加到dom树种，那样创建dom没有意义。

5、如何动态实现表格内容的复制？

解答：通过dom表格的innerHTML属性，cotab.innerHTML=tab.innerHTML;

6、document的createElement方法的返回值是什么？

解答：createElement方法的返回值是创建出来的dom标签对象。

7、如何动态实现表格边框的复制？

解答：通过dom表格标签的border属性。 cotab.border=tab.border;

8、如何动态实现表格样式的复制？

解答：通过dom表格标签的style属性。

9、table标签的常见属性有哪些？

解答：边框border，标题caption等等

10、如何动态修改表格的标题？

解答：通过表格dom对象的caption属性的innerHTML属性。

cotab.border=tab.border;

js如何实现动态克隆一个表格？的更多相关文章

  1. js如何实现动态的在表格中添加和删除行？（两种方法）

    js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...

  2. 浅谈js中如何动态添加表头/表列/表格内容

    我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我 ...

  3. js如何实现动态在表格中添加标题和去掉标题？

    js如何实现动态在表格中添加标题和去掉标题? 一.总结 1.通过table标签的createCaption(),deleteCaption()方法实现. document.getElementById ...

  4. 如何用easyui+JAVA 实现动态拼凑datagrid表格(续)

    前面一段时间写了一篇文章: 如何用easyui+JAVA 实现动态拼凑datagrid表格 这篇文章的话,效果是可以实现,但是经过我反复试验,还是存在一些问题的. 今天这篇文章就是向大家介绍下如何避免 ...

  5. js如何实现动态点击改变单元格颜色？

    js如何实现动态点击改变单元格颜色? 一.总结 1.通过table的rows属性,遍历表格所有行,然后通过cells属性,遍历每一行中的单元格. 2.遍历的过程中,动态的为每一个单元格定义单击事件,改 ...

  6. bootstrap做了一个表格

    花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...

  7. 利用scrapy-splash爬取JS生成的动态页面

    目前,为了加速页面的加载速度,页面的很多部分都是用JS生成的,而对于用scrapy爬虫来说就是一个很大的问题,因为scrapy没有JS engine,所以爬取的都是静态页面,对于JS生成的动态页面都无 ...

  8. [jQuery编程挑战]003 克隆一个页面元素及其相关事件

    挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...

  9. 原生js怎么为动态生成的标签添加各种事件

    这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...

随机推荐

  1. HDU 4927 Series 1(推理+大数）

    HDU 4927 Series 1 题目链接 题意:给定一个序列,要求不断求差值序列.直到剩一个,输出这个数字 思路:因为有高精度一步.所以要推理一下公式,事实上纸上模拟一下非常easy推出公式就是一 ...

  2. 102.tcp实现多线程连接与群聊

    协议之间的关系 socket在哪 socket是什么 Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP ...

  3. JS实现拖拽小案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Cocos2d-x学习笔记（一）HelloWorld

    原创文章,转载请注明出处:http://blog.csdn.net/sfh366958228/article/details/38656755 前言 正式来公司实习已有一月,前一月主要是看了<C ...

  5. android开发设计辅助工具整理

    1.Button设计工具button设计

  6. PHP模拟链表操作

    PHP模拟链表操作 一.总结 1.类成员用的是-> 2.对象节点相连的话,因为是对象,所以不用取地址符号 3.数组传递参数的时候传引用的方法 ,& 二.PHP模拟链表操作 代码一: /* ...

  7. win8.1 “服务器运行失败”的解决方法

    平台:win8.1 SP1 问题:安装QQ安全管家又卸载后出现了奇怪的问题,1.在桌面点右键→个性化时,提示“服务器运行失败”.2.右键点击“这台电脑”,选择“属性”时没有反应.3.开始屏幕里随便选择 ...

  8. Swiper+ ejs模板引擎+ iScroll插件知识总结

    一. Swiper swiper是一个应用于移动端的动画插件,原理类似于轮播图 官网 http://www.swiper.com.cn/# html结构 <div class="swi ...

  9. Javascript和jquery事件-鼠标移入移出事件

    javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...

  10. 11.5 Android显示系统框架_Vsync机制_代码分析

    5.5 surfaceflinger对vsync的处理buffer状态图画得不错:http://ju.outofmemory.cn/entry/146313 android设备可能连有多个显示器,AP ...