在写前端页面时,有时候根据业务要求需要动态增加或减少一行或多行输入框,之前看到别人写的太复杂,我把自己简化过的拿出来给大家参考一下。
实现后的效果,点击添加在最下方新增一行输入框,点击删除删除该输入框。
我先说一下实现的逻辑,第一行输入框是固定的的,后面的几行都是以第一行为模板克隆而来的,当然还需要更改克隆后的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="