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......

三、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>8.4 演示文档</title>
 6     <style type="text/css">
 7     </style>
 8 </head>
 9 <body>
10     <table id="tab" border="1">
11     <caption>表格名称</caption>
12     <thead>
13         <tr>
14             <th colspan="3">标题1</th>
15         </tr>
16     </thead>
17     <tbody>
18         <tr>
19             <td>单元格11</td>
20             <td>单元格12</td>
21             <td>单元格13</td>
22         </tr>
23         <tr>
24             <td>单元格21</td>
25             <td>单元格22</td>
26             <td>单元格23</td>
27         </tr>
28         <tr>
29             <td>单元格31</td>
30             <td>单元格32</td>
31             <td>单元格33</td>
32         </tr>
33         </tbody>
34         <tfoot><td>备注：</td><td colspan="2"></td></tfoot>
35     </table>
36     <input type="button" value="复制表格" onclick="copytab()">
37     <script>
38     function copytab(){
39         var tab=document.getElementById('tab');
40         var cotab=document.createElement('table')
41         cotab.innerHTML=tab.innerHTML;
42         cotab.border=tab.border;
43         cotab.style.marginTop='20px';
44         cotab.caption.innerHTML='我是复制的'
45         document.body.appendChild(cotab) 
46     }
47 
48     </script>
49 </body>
50 </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;