软件学堂

网游分类软件分类

利用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代码的准确性,请点击:克隆表格 进行本实例源码下载 

上一篇:JS实现动态删除页面中的元素
下一篇:利用JS实现拖动表格行改变顺序

相关文章