动态添加行（一）

最新推荐文章于 2019-06-23 15:49:29 发布

里威尔

最新推荐文章于 2019-06-23 15:49:29 发布

阅读量323

点赞数

本文链接：https://blog.csdn.net/Lee_vi/article/details/60874425

版权

<%@ 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>