文章目录
- js如何实现动态克隆一个表格？
- 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>
-
- 解答：通过document的createElement方法，然后然后将创建好的这个dom表格对象加到document的body属性中。
- 解答：var cotab=document.createElement(‘table‘) 参数是‘table‘
- 解答：append是附加贴上的意思，appendChild就是给某个元素贴上孩子的意思。
- 解答：document的createElement方法创建出来的dom标签对象，如果不append到实体dom标签，那样根本就没加到dom树种，那样创建dom没有意义。
- 解答：通过dom表格的innerHTML属性，cotab.innerHTML=tab.innerHTML;
- 解答：createElement方法的返回值是创建出来的dom标签对象。
- 解答：通过dom表格标签的border属性。 cotab.border=tab.border;
- 解答：通过dom表格标签的style属性。
- 解答：边框border，标题caption等等
- 解答：通过表格dom对象的caption属性的innerHTML属性。 cotab.border=tab.border;
js如何实现动态克隆一个表格？
实例描述：
实现表格及其内容的复制
案例要点：
通过innerHTML可以轻松实现表格内容的复制
表格的属性需要单独的复制
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>
解答：通过document的createElement方法，然后然后将创建好的这个dom表格对象加到document的body属性中。
解答：var cotab=document.createElement(‘table‘) 参数是‘table‘
解答：append是附加贴上的意思，appendChild就是给某个元素贴上孩子的意思。
解答：document的createElement方法创建出来的dom标签对象，如果不append到实体dom标签，那样根本就没加到dom树种，那样创建dom没有意义。
解答：通过dom表格的innerHTML属性，cotab.innerHTML=tab.innerHTML;
解答：createElement方法的返回值是创建出来的dom标签对象。
解答：通过dom表格标签的border属性。 cotab.border=tab.border;
解答：通过dom表格标签的style属性。
解答：边框border，标题caption等等
解答：通过表格dom对象的caption属性的innerHTML属性。
cotab.border=tab.border;
发表回复