jquery添加删除input输入框

最新推荐文章于 2023-07-17 10:27:13 发布

Mr_daiven

最新推荐文章于 2023-07-17 10:27:13 发布

阅读量7.7k

点赞数

分类专栏： JavaScript 文章标签： jQuery input

本文链接：https://blog.csdn.net/DWL0208/article/details/82711243

版权

这篇博客介绍了如何利用jQuery实现动态增加或删除前端页面的input输入框功能。通过固定的第一行输入框作为模板，点击添加按钮进行克隆并修改相关属性，删除按钮则根据id移除相应行。博客提供了简单的代码实现逻辑。

摘要由CSDN通过智能技术生成

在写前端页面时，有时候根据业务要求需要动态增加或减少一行或多行输入框，之前看到别人写的太复杂，我把自己简化过的拿出来给大家参考一下。

实现后的效果，点击添加在最下方新增一行输入框，点击删除删除该输入框。

我先说一下实现的逻辑，第一行输入框是固定的的，后面的几行都是以第一行为模板克隆而来的，当然还需要更改克隆后的input框属性。我把整个HTML先贴上来

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ include file="/common/setting.jsp"%>
<html>
<title>${title }</title>
<link rel="stylesheet" type="text/css" href="${ctx}/reports/tiles/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/reports/skins/css/reports.css" />
<script type="text/javascript" src="${ctx}/reports/tiles/js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="${ctx}/reports/tiles/bootstrap/js/bootstrap.min.js"></script>
<body>
<jsp:include page="/common/header.jsp"/>
<div class="container">
<div class="row"> 
<div class="

最低0.47元/天解锁文章

Mr_daiven

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jquery添加删除input输入框

在写前端页面时，有时候根据业务要求需要动态增加或减少一行或多行输入框，之前看到别人写的太复杂，我把自己简化过的拿出来给大家参考一下。实现后的效果，点击添加在最下方新增一行输入框，点击删除删除该输入框。我先说一下实现的逻辑，第一行输入框是固定的的，后面的几行都是以第一行为模板克隆而来的，当然还需要更改克隆后的input框属性。我把整个HTML先贴上来&lt;%@ p...
复制链接

扫一扫

专栏目录