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. 3/19 Django框架 url路由配置及模板渲染

    3/19 Django框架 url路由配置及模板渲染 1.路由分配 URL(Uniform Resoure Locato):统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示, ...

  2. 洛谷 P1689 方程求解

    P1689 方程求解 题目描述 给一个方程,形如X+Y=Z或X-Y=Z.给出了其中两个未知数,请求出第三个数.未知数用‘?’表示,等式中也许会出现一些多余的空格. 输入输出格式 输入格式: 一行,方程 ...

  3. 疯狂html5讲义（二）：HTML5简的经常使用元素与属性（二）:html5新增的通用属性

    1.contentEditable属性 true时可直接编辑html元素里面的内容.且具有"可继承"的特点. 编辑后不要刷新页面.否则编辑的内容会丢失,能够通过该元素的innerH ...

  4. SJTU 3001. 二哥的幸运

    Description 二哥是一个挺二的人,在二哥的世界观中,有些数字代表着幸运,假设在某一天二哥可以看到一个幸运数字,那么他将很高兴.当然,二哥对于幸运的定义也是不同凡响,假设一个数字仅仅包括4或者 ...

  5. touch、touchevent-事件总结

    1.废话不多说,直接上代码,如下 package com.example.mygestrue; import android.support.v7.app.ActionBarActivity; imp ...

  6. 7. 基于Express实现接口

    安装Mongoose 创建model //server/models/goods.js var mongoose = require('mongoose');//优先到node_modeles里加载 ...

  7. angular反向代理

    第一步:根目录新建 proxy.conf.json target:就是代理的服务器地址. 接口地址必须是http://localhost:8081/api开头 { "/api":{ ...

  8. Photon + Unity3D 线上游戏开发 学习笔记(三)

    好的,说了两篇了 如今我们正式的入手,揭开photon 的盖头哈  建立photon项目 第一步:   在Visual studio建立一个空的 待会为了測试也会在里面建立一个client 项目 (只 ...

  9. jQuery的实现原理和核心

    1.jQuery的实现原理 1)jQuery采用的是构造函数模式进行开发的,jQuery是一个类 2)上面说的常用的方法(CSS.属性.筛选.事件.动画.文档处理)都是定义在jQuery.protot ...

  10. OFFICE2013 打开两个word文档卡死的解决办法

    这几天Office打开一个word好好的,两个就直接卡死了,百度了一下: 原文地址: http://hi.baidu.com/pjhero/item/ca326e3dcfebebb9623aff6e ...