在写前端页面时，有时候根据业务要求需要动态增加或减少一行或多行输入框，之前看到别人写的太复杂，我把自己简化过的拿出来给大家参考一下。
实现后的效果，点击添加在最下方新增一行输入框，点击删除删除该输入框。
我先说一下实现的逻辑，第一行输入框是固定的的，后面的几行都是以第一行为模板克隆而来的，当然还需要更改克隆后的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="page-header">
<h3>
表头配置
</h3>
</div><!-- /.page-header -->
<form id="dataForm" name="dataForm" action="${ctx }/head/toSaveHead" method="post">
<input type="hidden" id="headerId" name="headerId" value="${headerInfo.headerId }">
<div class="col-md-12 form-inline" style="margin-top:10px">
<div class="form-group col-md-6">
<label class="control-label" style="float:left"><h4> 表头名称：</h4></label>
<div class="col-sm-8">
<input type="text" id="header_name" name="headerName" value="${headerInfo.headerName }" class="form-control" style="width:100%;"/>
</div>
</div>
<div class="form-group col-md-6">
<label class="control-label" style="float:left"><h4> 表头代码：</h4> </label>
<div class="col-xs-8">
<input type="text" id="headerDm" name="headerDm" value="${headerInfo.headerDm }" class="form-control" style="width:100%;"/>
</div>
</div>
</div>
<div class="col-md-12 mar-t-10">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">子项配置</h3>
</div>
<div class="panel-body" id="items">
<div class="col-md-12 form-inline" style="margin-top:10px" id="moban">
<div class="form-group col-md-5">
<label class="control-label" style="float:left"><h5> 子项名称：</h5></label>
<div class="col-sm-8">
<input type="text" id="headerName" name="details[0].value" value="${headerInfo.details[0].value }" class="first form-control" style="width:100%;"/>
</div>
</div>
<div class="form-group col-md-5">
<label class="control-label" style="float:left"><h5> 子项代码：</h5> </label>
<div class="col-xs-8">
<input type="text" id="headerDm" name="details[0].key" value="${headerInfo.details[0].key }" class="form-control" style="width:100%;"/>
</div>
</div>
<div class="form-group col-md-2">
<a id="link" href="javascript:void(0)" onclick="addItem();">添加</a>
</div>
</div>
<c:forEach items="${headerInfo.details }" var="item" begin="1" varStatus="row">
<div class="col-md-12 form-inline" style="margin-top:10px" id="item${row.index }">
<div class="form-group col-md-5">
<label class="control-label" style="float:left"><h5> 子项名称：</h5></label>
<div class="col-sm-8">
<input type="text" id="headerName" name="details[${row.index }].value" value="${item.value }" class="value form-control" style="width:100%;"/>
</div>
</div>
<div class="form-group col-md-5">
<label class="control-label" style="float:left"><h5> 子项代码：</h5> </label>
<div class="col-xs-8">
<input type="text" id="headerDm" name="details[${row.index }].key" value="${item.key }" class="key form-control" style="width:100%;"/>
</div>
</div>
<div class="form-group col-md-2">
<a href="javascript:void(0)" onclick="deleteItem(${row.index });">删除</a>
</div>
</div>
</c:forEach>
</div>
</div>
</div>
</form>
</div>
</div>
<jsp:include page="/common/foot.jsp"/>
<script type="text/javascript">
var row;
$(document).ready(function(){
row = ${fn:length(headerInfo.details) };
if(row == 0){
row++;
}
});
function deleteItem(id){
if(confirm("确定删除吗？")){
$("#item"+id).remove();
}
}
function addItem(){
var item = $("#moban").clone();
item.attr("id","item"+row);
item.find("#link").text("删除").attr("onclick","deleteItem("+row+");");
item.find("#headerName").attr("name","details["+row+"].value").val(null);
item.find("#headerDm").attr("name","details["+row+"].key").val(null);
$("#items").append(item);
row++;
}
</script>
</body>
</html>
id为”moban”的div作为模板，点击添加触发addItem(）事件，代码很简单，首先克隆模板，然后修改id,name等属性，最后拼接到items里面。
deleteItem()为删除一行的事件，根据id直接删除。
版权声明：本文为DWL0208原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。