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;