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. BZOJ2806: [Ctsc2012]Cheat（广义后缀自动机，单调队列优化Dp）

    Description Input 第一行两个整数N,M表示待检查的作文数量,和小强的标准作文库的行数接下来M行的01串,表示标准作文库接下来N行的01串,表示N篇作文 Output N行,每行一个整 ...

  2. BZOJ1503: [NOI2004]郁闷的出纳员（Splay）

    Description OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的 工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复无常,经 ...

  3. HttpClient的基本使用

    HttpClient的基本使用 前言 HttpClient是Apache提供的一个用于在Java中处理HTTP请求.响应操作的工具,由于JDK自带的API对HTTP协议的支持不是很友好,使用起来也不是 ...

  4. NIO专栏学习

    http://blog.csdn.net/column/details/12993.html

  5. 洛谷 P2908 [USACO08OPEN]文字的力量Word Power

    P2908 [USACO08OPEN]文字的力量Word Power 题目描述 Farmer John wants to evaluate the quality of the names of hi ...

  6. Activity启动过程源代码分析

    事实上写分析源代码文章总会显得非常复杂非常乏味,可是梳理自己看源代码时的一些总结也是一种提高. 这篇博客分析下Activity启动过程源代码,我会尽量说得简单点. 个人的观点是看源代码不能看得太细,否 ...

  7. PHP版本 D-Link 动态域名客户端

    <?php /* * D-Link 动态域名客户端.主域名www.dlinkddns.com 和 www.dlinkddns.com.cn * 首先获取外网IP,若IP没有变化,则结束运行:否则 ...

  8. 3.十分钟读懂——App开发规范的业务流程

    转自:http://www.itdaan.com/blog/2017/12/08/6bc06b3387a8d1238504355a6a1c6743.html 一.主要流程   二.产品立项 工作概述: ...

  9. Nginx详细编译参数

    本参数基于Nginx-1.15.2安装包 一 路径参数 1.1.1 指定Nginx安装路径 --prefix=/usr/local/nginx- 1.1.2 设置Nginx可执行文件路径默认路径在 - ...

  10. 1.1 Introduction中 Kafka as a Messaging System官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Kafka as a Messaging System kafka作为一个消息系统 ...