表格添加 点击添加增加一列

改代码来源于广西省平台的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;}

原文地址：https://www.cnblogs.com/luYing666/p/11590270.html