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

标签：remove   status   border   date   总结   body   来源   有用   项目   

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

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

标签：remove   status   border   date   总结   body   来源   有用   项目   

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