js如何实现动态克隆一个表格?
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;