C#——克隆表单

最新推荐文章于 2023-06-15 10:47:14 发布

linsy520

最新推荐文章于 2023-06-15 10:47:14 发布

阅读量239

点赞数

分类专栏： c#

本文链接：https://blog.youkuaiyun.com/weixin_44485261/article/details/99697230

版权

c# 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了在界面设计中，如何通过克隆表单来便捷地读取多行数据，提供了一种常见的克隆表单的实现方法，并通过前后效果对比展示了其功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：由于很多时候搭建界面，需要读取N行数据的时候不好设计布局，一般很多人都会用简便的方法进行克隆表单读取，从而达到想要的效果。

页面测试代码：

<title>克隆表格</title>
</head>
<body>
    <input type=button value=克隆表格 name=mytxt onclick=add()>
    <table border=1>
	    <tr id=r1 name=r1>
	      <td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td>
	    </tr>
    </table>
</body>

JS测试代码：

<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>

功能演示：

克隆表单先的效果：