jquery动态增加多行文本框并计算值

瑆箫

已于 2022-09-20 18:48:48 修改

阅读量712

点赞数

CC 4.0 BY-SA版权

分类专栏：前端后端文章标签： jquery java servlet

于 2022-09-20 18:48:41 首次发布

本文链接：https://blog.youkuaiyun.com/mo3408/article/details/126959209

前端同时被 3 个专栏收录

309 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

后端

277 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

web

210 篇文章 ¥129.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍了如何使用jQuery实现动态增加多行文本框的功能，并详细讲解了如何为数量和单价输入框添加事件，以进行值的计算。通过点击增加按钮，可以动态生成新的输入行，便于用户输入多个数据项。

1.实现的效果如下：

2.第一步首先实现点击增加一行：

默认第一行：

<dl id="zprices">
	<dt>
		<span>产品名称 <font>*</font>
		</span>
		<span>产品数量 <font>*</font>
		</span>
		<span>产品单价 <font>*</font>
		</span>
		<span>产品总价 <font>*</font>
		</span>
	</dt>
	<dd id="addt" class="addr">
		<span>
			<input type="text" name="name" />
		</span>
		<span>
			<input type="text" name="num" />
		</span>
		<span>
			<input type="text" name="price" />
		</span>
		<span>

了解本专栏