动态添加行(一)

    xiaoxiao2021-03-25  166

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   <head>     <base href="<%=basePath%>">          <title>Table动态添加行</title>      <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0">     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery.js"></script>   </head>   <script type="text/javascript">          /**          * 测试新增          */         function addcsTr(){             var j_mod = $("#cs_mod");//获取模板             var tab = $("#cs_tab");             var index = tab.find("[flag='cs_Tr']").length;//计算序号             j_mod.find(".firstTd").html(index+1);             tab.append(j_mod.html());         }         /**          * 测试删除          */         function delcsTr(obj){             var parTab = $(obj).closest("table");//得到父节点table             $(obj).closest("tr").remove();             //重新调整序号             parTab.find(".firstTd").each(function(i){                 $(this).html(i+1);             });         }         /**          * 测试新增2          */         function addcsTr2(obj){             var j_mod = $("#cs2_mod");//获取模板2             var tab = $(obj).closest("table");             tab.append(j_mod.html());             //处理操作图标             tab.find("[flag='delIcon']").show();             //达到了5条上限,隐藏添加按钮             var addArr = tab.find("[flag='addIcon']");             var addCount = addArr.length;             if(addCount==5){                 addArr.first().hide();             }         }         /**          * 测试删除2          */         function delcs2Tr(obj){             var parTab = $(obj).closest("table");//得到父节点table             var this_tr = $(obj).closest("tr");             this_tr.remove();             //处理操作图标             var trArr = parTab.find("tr").find("[flag='addIcon']");             trArr.each(function(i){                 if(i==0){                     $(this).show();                     if(trArr.length==1){                         $(this).next().hide();                     }                 }             });         } //保存方法 function saveXyjd(){             //开始处理协议酒店有关数据 jd_xyjd             var xyjdJsonData = {};             var xyjdlx = j("#xyjdlx option:selected").val();//协议酒店类型  1酒店  2品牌              var xyh = j("#xyh").val();//协议号             xyjdJsonData.xyjdlx = xyjdlx;                  xyjdJsonData.xyh = xyh;                       //开始处理 协议酒店价格计划 数据             xyjdJsonData.xyjgjh_jsonArr = [];           var jdTrArr = j("#jd_tab").find("[flag='jgjhTr']");//所有价格计划tr的集合 if(jdTrArr.length==0){ layer.alert("请至少设置一条价格计划!"); return; } jdTrArr.each(function(){ var xyjgjh_json = {}; var jgjhmc = j(this).find("[flag='jgjhmc']").val();//价格计划说明 var fxmc = j(this).find("[flag='fxmc'] option:selected").html();//房型名称 xyjgjh_json.jgjhmc = jgjhmc; xyjgjh_json.fxmc = fxmc; //开始处理每个价格计划中的不适用日期 var bsyrqTab = j(this).find("[flag='bsyrq_tab']"); var bsyrqsArr = bsyrqTab.find("[flag='bsyrqs']"); var bsyrqzArr = bsyrqTab.find("[flag='bsyrqz']"); xyjgjh_json.bsyrqsJsonArr = []; xyjgjh_json.bsyrqzJsonArr = []; bsyrqsArr.each(function(i){ var bsyrqsTmp = j(this).val(); var bsyrqzTmp = j(bsyrqzArr[i]).val(); xyjgjh_json.bsyrqsJsonArr.push(bsyrqsTmp); xyjgjh_json.bsyrqzJsonArr.push(bsyrqzTmp); }); xyjdJsonData.xyjgjh_jsonArr.push(xyjgjh_json); });             if(j("#mainForm").validationEngine("validate")){                 var param = {"xyjd_jsonData":JSON.stringify(xyjdJsonData)};                 j.post("/asms/hotel/agreement/hotelagr/saveXyjd",param,function(data){                     var resultArr = data["data"].split("|");                     if(data["data"].indexOf("-1")>-1){//表示新增异常                         layer.alert(resultArr[1]);                     }else{//表示成功                         layer.alert("新增协议酒店成功!",function(){                             toClose();                         });                     }                 });             }         }     </script>   <body>    <table width="15%" class="tableList tableLine mt5" id="cs_tab">     <tr>         <th style="text-align: center;">动态添加行</th>         <th style="text-align: center;">             操作         </th>         <th style="text-align: center;">             <img src="/static/asms/images/icon_add.png" οnclick="addcsTr();"/>         </th>     </tr> </table> <table id="cs_mod" style="display: none">     <tr flag="cs_Tr">         <td style="text-align: center" class="firstTd"></td>         <td>             <table  width="100%">                 <tr>                     <td>                         <img src="/static/asms/images/icon_add.png" οnclick="addcsTr2(this);" flag="addIcon"/>                         <i class="delete_icon"  οnclick="delcs2Tr(this);" style="display: none" flag="delIcon"/>                     </td>                 </tr>             </table>         </td>         <td>             <i class="delete_icon" οnclick="delcsTr(this);"/>         </td>     </tr> </table> <table id="cs2_mod" style="display: none;">     <tr>         <td>             <img src="/static/asms/images/icon_add.png"  οnclick="addcsTr2(this);" flag="addIcon" style="display: none"/>             <i class="delete_icon"  οnclick="delcs2Tr(this);"  flag="delIcon" style="display: none"/>         </td>     </tr> </table>   </body> </html>
    转载请注明原文地址: https://ju.6miu.com/read-4005.html

    最新回复(0)