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. 洛谷 P1636 Einstein学画画

    P1636 Einstein学画画 题目描述 Einstein学起了画画, 此人比较懒--,他希望用最少的笔画画出一张画... 给定一个无向图,包含n 个顶点(编号1~n),m 条边,求最少用多少笔可 ...

  2. amazeui学习笔记一（开始使用1）--主干

    amazeui学习笔记一(开始使用1)--主干 一.总结 1.英语:学好英语,编程轻松很多 2. layouts compatibility change log web app collection ...

  3. HTTP请求报文、响应报文

    HTTP请求报文 HTTP请求报文由3部分组成(请求行+请求头+请求体): 请求行:①是请求方法,GET和POST是最常见的HTTP方法,除此以外还包括DELETE.HEAD.OPTIONS.PUT. ...

  4. OpenCV人脸检測(完整源代码+思路)

    本博文IDE为vs2013 OpenCV2.49 话不多说,先看视频演示(20S演示): 例如以下: https://v.youku.com/v_show/id_XMjYzMzkxMTYyMA==.h ...

  5. delete noprompt archivelog 报错ORA-00245，RMAN-08132

    在RMAN执行  delete noprompt archivelog until time 'sysdate-1';  报错   ORA-00245: control file backup fai ...

  6. CentOS下利用Docker部署Surging

    原文:CentOS下利用Docker部署Surging 1. 安装Centos, 配置固定ip配置文件地址vi /etc/sysconfig/network-scripts/ifcfg-ens33`` ...

  7. Spring Boot中的缓存支持（一）注解配置与EhCache使用

    Spring Boot中的缓存支持(一)注解配置与EhCache使用 随着时间的积累,应用的使用用户不断增加,数据规模也越来越大,往往数据库查询操作会成为影响用户使用体验的瓶颈,此时使用缓存往往是解决 ...

  8. Oracle 中的Interger类型

    引自 wolfAone, oracle有没有integer类型,这种类型的最大值是多少啊. Integer是Number类型的子类型: NUMBER Type You use the NUMBER d ...

  9. mahout測试朴素贝叶斯分类样例

    对于这个測试建议大家先理解原理,这里我画了例如以下的示意图 接下来就依照例如以下的细节来输入指令測试: 首先前提是Hadoop安装并启动,mahout已经安装了. <strong>< ...

  10. 从Unreal Engine 3到Unreal Engine 4

    Unreal Engine 4公布好长好长时间了.直到近期才有时间细致去看一下. TimSweeney老大一句话"IF YOU LOVE SOMETHING, SET IT FREE&quo ...