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;