改代码来源于广西省平台的uums项目中的jsp/addOrUpdate.jsp界面（使用easyui 前后端未进行分离）//在表格中，点击添加的时候，自动增加一行<table style="width:98%" id="tab" class="table table-bordered table-condensed table-striped table-hover table-responsive"> <tbody> <tr> <th>酒店</th> <th>房间</th> <th>床位单价</th> <th>床位数量</th> <th>操作数量</th> </tr>//在进行添加界面的时候（因为在添加新界面的时候，需要默认有一个空行，因为如果没有空行，就没有办法点击添加按钮，也就没有办法进行自动添加一行）//当时的思路: 在点击添加的时候，将添加的数据进行一个非空判断，如果为null则不添加，否则进行添加，为避免多出空白数据<c:if test="${applyClasses.cid==null||applyClasses.cid==''}"> <tr> <td ><input type='text' name='applyHotelList[0].hotelname' value='' class='inputText'/></td> <td ><input type='text' name='applyHotelList[0].type' value='' class='inputText'/></td> <td ><input type='text' name='applyHotelList[0].price' value='' class='inputText'/></td> <td ><input type='text' name='applyHotelList[0].numberofdeds' value='' class='inputText'/></td> <td > <a href='#' class="delRow">删除</a> <a href="#" onclick=" addRow();" >添加</a> </td> </tr> </c:if>//在进行修改操作的时候，利用varStatus="status" 中的status.index(代表下标)，进行修改操作//注： 如果不使用下标值，点击提交的时候会把前边所有的信息总结为一条并进行添加//当时的思路：在点击修改的时候，将之前绑定的所有酒店删除，在进行添加（实则也没有用到update语句） <c:forEach items="${applyHotels}" var="hotel" varStatus="status"> <tr> <td><input type='text' name='applyHotelList[${status.index}].hotelname' value='${hotel.hotelname}' class='inputText'/></td> <td><input type='text' name='applyHotelList[${status.index}].type' value='${hotel.type}' class='inputText'/></td> <td><input type='text' name='applyHotelList[${status.index}].price' value='${hotel.price}' class='inputText'/></td> <td><input type='text' name='applyHotelList[${status.index}].numberofdeds' value='${hotel.numberofdeds}' class='inputText'/></td> <td > <a href='#' class="delRow">删除</a> <a href="#" onclick=" addRow();" >添加</a> </td> </tr> </c:forEach> </tbody></table>//js代码
//删除时的代码$(function() { $(document).on('click','a.delRow',function(){ var _len = $("#tab tr").length; if(_len==2){ alert('至少保留一行!') }else{ $(this).parent().parent().remove(); } });});
var nums=${fn:length(giftList)};nums=nums+1;//添加一行function addRow(index){ var _len = $("#tab tr").length; $("#tab").append("<tr id="+(Number(nums)+Number(1))+" align='center' >" +"<td ><input type='text' id='spDepartment"+(Number(nums)+Number(1))+"name' name='applyHotelList["+(Number(nums)+Number(1))+"].hotelname' value='' class='inputText'/></td>" +"<td ><input type='text' id='spDepartment"+(Number(nums)+Number(1))+"name' name='applyHotelList["+(Number(nums)+Number(1))+"].type' value='' class='inputText'/></td>" +"<td ><input type='text' id='spDepartment"+(Number(nums)+Number(1))+"name' name='applyHotelList["+(Number(nums)+Number(1))+"].price' value='' class='inputText'/></td>" +"<td ><input type='text' id='spDepartment"+(Number(nums)+Number(1))+"name' name='applyHotelList["+(Number(nums)+Number(1))+"].numberofdeds' value='' class='inputText'/></td>" +"<td ><a href='#' class='delRow'>删除</a><a href='#'onclick='addRow();' >添加</a></td>" +"</tr>"); nums=nums+1;}
