利用JS克隆表格
2012-11-11 来源：网络
【实例名称】
利用JS克隆表格
【实例描述】
表格的行可以插人、删除和修改，类似于c#中的DataTable对象。大多数的表格对象都支持克隆功能，本例就学习如何克隆HTML的table。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧（www.xue51.com）</title> </head> <body> <input type=button value=克隆表格 name=mytxt onclick=add()> <table border=1> <tr id=r1 name=r1> <td>第一列</td><td>第二列</td> </tr> </table> <script language=JavaScript> i=1; function add() { ++i; //用于表格id的自增长 var newTr= r1.cloneNode(true); //克隆指定的行 newTr.id="r"+i; //指定新行的id newTr.name="r"+i; //指定新行的name r1.parentNode.insertAdjacentElement("beforeEnd",newTr); //在当前表格中插入行 } </script> </body> </html>
【运行效果】
【难点剖析】
本例的重点有两个，如何克隆行，如何将克隆的行添加到当前表格。克隆行使用了行的“cloneNode”方法，其只有一个参数，指明被克隆的节点是否应该包含所有的属性及原始节点中的子节点。将克隆行添加到当前表格的方法是“insertAdjacentElement”，其包含两个参数，要插入的位置和要插入的行。
【源码下载】
为了JS代码的准确性，请点击：克隆表格 进行本实例源码下载
