jquery新增刪除input輸入框
阿新 • • 發佈：2018-12-09
在寫前端頁面時，有時候根據業務要求需要動態增加或減少一行或多行輸入框，之前看到別人寫的太複雜，我把自己簡化過的拿出來給大家參考一下。
實現後的效果，點選新增在最下方新增一行輸入框，點選刪除刪除該輸入框。
我先說一下實現的邏輯，第一行輸入框是固定的的，後面的幾行都是以第一行為模板克隆而來的，當然還需要更改克隆後的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直接刪除。