When writing the front-end page, sometimes one or more lines of input boxes are added or reduced dynamically according to the business requirements. I saw that other people's writing is too complex before. I'll give you my simplified one for reference.
To achieve the effect, click Add to add a new line of input box at the bottom, and click Delete to delete the input box.
Let me start with the implementation logic. The input box in the first line is fixed, and the following lines are all cloned from the first line template. Of course, you need to change the attribute of the cloned input box. I'll post the whole HTML first
<%@ 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>
//Table header configuration
</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> Header name:</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> Header code:</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">Sub item configuration</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> Subitem Name:</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> Sub item code:</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();">Add to</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> Subitem Name:</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> Sub item code:</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 });">delete</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("Are you sure to delete?")){
$("#item"+id).remove();
}
}
function addItem(){
var item = $("#moban").clone();
item.attr("id","item"+row);
item.find("#link").text(" delete "). 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>
The div with the id of "moban" is used as the template. Click Add to trigger the addItem() event. The code is very simple. First clone the template, modify the attributes such as id and name, and then splice them into items.
deleteItem() is an event to delete a row. It is deleted directly according to the id.