Jquery方法给TABLE动态增加行

JS方法如下:

$(document).ready(function(){
				  //获取放入隐藏域的简历数据
				  var optionListData = $("#optionList").val();
				  
				  if(null == optionListData ||"" == optionListData){
					  getFrjl();  //ajax从后台读取简历数据
				  }else{
					  getJL(optionListData);  //获取页面填写的简历数据
				  }
				 
				 //动态添加行
				 $('#addFrjl').click(function(){
					var trHTML = '<tr class = "frjlClass">'+
						'<td>'+
						'从<s:textfield onClick="WdatePicker();" cssStyle="width:150px;text-align:center;" id="nyks"  cssClass="weui_input" placeholder="请输入开始日期"><s:param name="value"><s:date name="e.nyks" format="yyyy-MM-dd"></s:date></s:param></s:textfield>'+
						'至<s:textfield onClick="WdatePicker();" cssStyle="width:150px;text-align:center;" id="nyjs"  cssClass="weui_input" placeholder="请输入结束日期"><s:param name="value"><s:date name="e.nyjs" format="yyyy-MM-dd"></s:date></s:param></s:textfield>'+
					'</td>'+
					'<td>'+
						'<s:textfield id="frgzdw" cssClass="weui_input" placeholder="请输入工作单位"></s:textfield>'+
					'</td>'+
					'<td>'+
						'<s:textfield id="frgzzw" cssClass="weui_input" placeholder="请输入职务"></s:textfield>'+
					'</td>'+
					'<td>'+
						'<div style="float: right;">'+
							'<s:a cssClass="weui_btn weui_btn_plain_primary weui_btn_operation" href="javascript:void(0);" onclick="delTr(this);">删除</s:a>'+
						'</div>'+
					'</td>'+
					'</tr>';
					$('#frjlTable tbody').append(trHTML);
				});
				
				//点击保存
				$('#sure').click(function(){
					var frjlList = new Array();
					var flag =true;
					
					if($(".frjlClass").size()==0){
						$("#jlError").html("个人简历不能为空");
						return;
					}else{
						$(".frjlClass").each(function(i){
							var frjl = {};
							frjl.kssj = $(this).find('#nyks').val();
							frjl.jssj = $(this).find('#nyjs').val();
							frjl.gzdw = $(this).find('#frgzdw').val();
							frjl.gzzw = $(this).find('#frgzzw').val();
							
							if(frjl.kssj.length==0){
								$("#jlError").html("个人简历第"+(i+1)+"行开始日期不能为空");
								flag = false;
								return false;
							}else{
								if(frjl.jssj.length>0){
									var startTmp=frjl.kssj.split("-");
				                    var endTmp=frjl.jssj.split("-");
				                    var sd=new Date(startTmp[0],startTmp[1],startTmp[2]);
				                    var ed=new Date(endTmp[0],endTmp[1],endTmp[2]);
				                    if(sd.getTime()>ed.getTime()){ 
				                        $("#jlError").html("个人简历第"+(i+1)+"行开始日期不能大于结束日期");
				                        flag = false;
				                        return false;
				                    }  
								}
							}
							
							if(frjl.gzdw.trim().length==0){
								$("#jlError").html("个人简历第"+(i+1)+"行工作单位不能为空");
								flag = false;
								return false;
							}
							if(frjl.gzzw.trim().length==0){
								$("#jlError").html("个人简历第"+(i+1)+"行职务不能为空");
								flag = false;
								return false;
							}
							
							frjlList.push(frjl);
						});
					}
					
					var frList = JSON.stringify(frjlList); 
					$("#optionList").val(frList);
					if(flag){
						$('#frjlForm').submit();
					}
				});
				
			}); 
			
			//删除行
		    function delTr(obj) {
		            $(obj).parents("tr").remove();
		    }
		    
		   	//ajax从后台获取简历信息
		    function getFrjl(){
		    	var rybh = $("#fzrbh").val();
		    	var url = "../tStglRyjlxxJson/getFrjlList.action?rybh="+rybh;
		    	$.ajax({
		    		url:url,
		    		success:function(data){
		    			var json = eval(data);
		    			for(var i=0;i<getJsonLength(json);i++){
		    				var nyjsrq = json[i].nyjs==null ? "" :json[i].nyjs.substring(0,10);
			    			var trHTML = '<tr class = "frjlClass">'+
								'<td>'+
								'从<s:textfield onClick="WdatePicker();" cssStyle="width:150px;text-align:center;" id="nyks"  cssClass="weui_input" placeholder="请输入开始日期" value="'+json[i].nyks.substring(0,10)+'"><s:param name="value" value="+json[i].nyks.substring(0,10)+"><s:date name="e.nyks" format="yyyy-MM-dd"></s:date></s:param></s:textfield>'+
								'至<s:textfield onClick="WdatePicker();" cssStyle="width:150px;text-align:center;" id="nyjs"  cssClass="weui_input" placeholder="请输入结束日期" value="'+nyjsrq+'"><s:param name="value" value="+json[i].nyjs.substring(0,10)+"><s:date name="e.nyjs" format="yyyy-MM-dd"></s:date></s:param></s:textfield>'+
								'</td>'+
								'<td>'+
									'<s:textfield id="frgzdw" cssClass="weui_input" placeholder="请输入工作单位" value="'+json[i].dw+'"></s:textfield>'+
								'</td>'+
								'<td>'+
									'<s:textfield id="frgzzw" cssClass="weui_input" placeholder="请输入职务" value="'+json[i].drzw+'"></s:textfield>'+
								'</td>'+
								'<td>'+
									'<div style="float: right;">'+
										'<s:a cssClass="weui_btn weui_btn_plain_primary weui_btn_operation" href="javascript:void(0);" onclick="delTr(this);">删除</s:a>'+
									'</div>'+
								'</td>'+
								'</tr>';
		    				$('#frjlTable tbody').append(trHTML);
		    				
		    			}
		    			
		    		},
		    	});
		    }
		    
		    //获取json长度
		    function getJsonLength(jsonObj){
		    	var length = 0;
		    	for(var item in jsonObj){
		    		length ++;
		    	}
		    	return length;
		    }
		    
		    //获取页面填写的简历信息
		    function getJL(optionListData){
		    	var json = eval(optionListData);
		    	for(var i=0;i<getJsonLength(json);i++){
    				var nyjsrq = json[i].jssj==null ? "" :json[i].jssj;
	    			var trHTML = '<tr class = "frjlClass">'+
						'<td>'+
						'从<s:textfield onClick="WdatePicker();" cssStyle="width:150px;text-align:center;" id="nyks"  cssClass="weui_input" placeholder="请输入开始日期" value="'+json[i].kssj+'"><s:param name="value" value="+json[i].kssj+"><s:date name="e.nyks" format="yyyy-MM-dd"></s:date></s:param></s:textfield>'+
						'至<s:textfield onClick="WdatePicker();" cssStyle="width:150px;text-align:center;" id="nyjs"  cssClass="weui_input" placeholder="请输入结束日期" value="'+nyjsrq+'"><s:param name="value" value="+json[i].jssj+"><s:date name="e.nyjs" format="yyyy-MM-dd"></s:date></s:param></s:textfield>'+
						'</td>'+
						'<td>'+
							'<s:textfield id="frgzdw" cssClass="weui_input" placeholder="请输入工作单位" value="'+json[i].gzdw+'"></s:textfield>'+
						'</td>'+
						'<td>'+
							'<s:textfield id="frgzzw" cssClass="weui_input" placeholder="请输入职务" value="'+json[i].gzzw+'"></s:textfield>'+
						'</td>'+
						'<td>'+
							'<div style="float: right;">'+
								'<s:a cssClass="weui_btn weui_btn_plain_primary weui_btn_operation" href="javascript:void(0);" onclick="delTr(this);">删除</s:a>'+
							'</div>'+
						'</td>'+
						'</tr>';
    				$('#frjlTable tbody').append(trHTML);
    				
    			}
		    }

 jsp页面如下

<body>
		<s:form action="../tStglFzrxx/saveFddbrdj.action" id="frjlForm">
			<div class="weui-row weui-no-gutter">
				<div class="weui-col-5">
				</div>
				<div class="weui-col-90">
					<div class="weui_cells weui_cells_form">
						<div class="weui_cell">
							<div class="weui_cell_hd" style="width: 100px;">
								<div style="width:80px;">
									<a href="../tStglClClxx/load.action" class="weui_btn weui_btn_plain_primary">返回</a>
								</div>
							</div>
							<div class="weui_cell_bd weui_cell_primary" style="font-size: 18px;text-align: center;font-weight: bold;">
								二、法定代表人登记表
							</div>
						</div>
						<div class="weui_cell">
							<div class="weui_cell_bd weui_cell_primary" style="font-size: 16px;color:red;"><s:fielderror ></s:fielderror>
							<div style="font-size: 16px;color:red;" id="jlError"></div>
								<s:hidden name="e.stfzrbh" id="fzrbh"></s:hidden>
								<s:hidden id="optionList" name="optionList"></s:hidden>
								<s:hidden name="clJbxxEntity.frzjlx"></s:hidden>
							</div>
						</div>
						<div class="weui_cell" style="background-color: #FAFAFA">
							<div class="weui_cell_bd weui_cell_primary">
								<div style="text-align: center;font-weight: bold;">
									基本信息
								</div>
							</div>
						</div>
						<div class="weui_cell">
							<div class="weui_cell_hd">
								<label class="weui_label">社团名称:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<s:textfield name="clJbxxEntity.stmc" cssClass="weui_input" readonly="true"></s:textfield>
							</div>
						</div>
						<div class="weui_cell">
							<div class="weui_cell_hd">
								<label class="weui_label">姓名:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<s:textfield name="clJbxxEntity.frxm" cssClass="weui_input" readonly="true"></s:textfield>
							</div>
							<div class="weui_cell_hd">
								<label class="weui_label"><span style="color:red;">*</span>出生日期:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<s:textfield onClick="WdatePicker();" cssStyle="width:180px;" id="csrq" name="e.csrq" cssClass="weui_input" placeholder="请输入出生日期">
								    <s:param name="value">
								        <s:date name="e.csrq" format="yyyy-MM-dd"></s:date>
								    </s:param>
								</s:textfield>
							</div>
						</div>
						<div class="weui_cell" >
							<div class="weui_cell_hd">
								<label class="weui_label" ><span style="color:red;">*</span>性别:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<s:bean name="com.kingtopinfo.base.basetype.BaseTypeService" var="sex">
								    <s:param name="code">SEX</s:param>
								</s:bean>
								<s:select cssClass="weui_select" name="e.xb" list="#sex.l"></s:select>
							</div>
							
							<div class="weui_cell_hd">
								<label class="weui_label"><span style="color:red;">*</span>民族:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<s:bean name="com.kingtopinfo.base.basetype.BaseTypeService" var="mz">
								    <s:param name="code">NATION</s:param>
								</s:bean>
								<s:select cssClass="weui_select" name="e.mz" list="#mz.l"></s:select>
							</div>
							
							<div class="weui_cell_hd">
								<label class="weui_label"><span style="color:red;">*</span>国籍:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<s:textfield name="e.gj" cssClass="weui_input" placeholder="请输入国籍"></s:textfield>
							</div>
						</div>
						<div class="weui_cell">
							<div class="weui_cell_hd">
								<label class="weui_label"><span style="color:red;">*</span>证件类型:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<s:bean name="com.kingtopinfo.base.basetype.BaseTypeService" var="zjlx">
								    <s:param name="code">ZJLX</s:param>
								    <s:param name="value">${ clJbxxEntity.frzjlx}</s:param>
								</s:bean>
								<s:select cssClass="weui_select"  list="#zjlx.n"></s:select>
							</div>
							
							<div class="weui_cell_hd">
								<label class="weui_label" ><span style="color:red;">*</span>证件编号:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<s:textfield name="clJbxxEntity.frsfzh" cssClass="weui_input" readonly="true"></s:textfield>
							</div>
						</div>
						<div class="weui_cell">
							<div class="weui_cell_hd">
								<label class="weui_label" ><span style="color:red;">*</span>政治面貌:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<s:bean name="com.kingtopinfo.base.basetype.BaseTypeService" var="zzmm">
								    <s:param name="code">ZZMM</s:param>
								</s:bean>
								<s:select cssClass="weui_select" name="e.zzmm" list="#zzmm.l"></s:select>
							</div>
							
							<div class="weui_cell_hd">
								<label class="weui_label"><span style="color:red;">*</span>社团职务:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<s:bean name="com.kingtopinfo.base.basetype.BaseTypeService" var="stzw">
								    <s:param name="code">STZW</s:param>
								</s:bean>
								<s:select cssClass="weui_select" name="e.stzw" list="#stzw.l"></s:select>
							</div>
							
							<div class="weui_cell_hd">
								<label class="weui_label"><span style="color:red;">*</span>兼职或专职:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<s:bean name="com.kingtopinfo.base.basetype.BaseTypeService" var="sfzz">
								    <s:param name="code">SFZZ</s:param>
								</s:bean>
								<s:select cssClass="weui_select" name="e.sfzz" list="#sfzz.l"></s:select>
							</div>
						</div>
						<div class="weui_cell">
							<div class="weui_cell_hd">
								<label class="weui_label"><span style="color:red;">*</span>家庭住址:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<s:textfield name="e.jtzz" cssClass="weui_input" placeholder="请输入家庭住址"></s:textfield>
							</div>
						</div>
						<div class="weui_cell">
							<div class="weui_cell_hd">
								<label class="weui_label" ><span style="color:red;">*</span>邮政编码:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<s:textfield name="e.yzbm" cssClass="weui_input" placeholder="请输入邮政编码"></s:textfield>
							</div>
							
							<div class="weui_cell_hd">
								<label class="weui_label"><span style="color:red;">*</span>手机号码:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<s:textfield name="clJbxxEntity.fryddh" cssClass="weui_input" readonly="true"></s:textfield>
							</div>
							
							<div class="weui_cell_hd">
								<label class="weui_label"><span style="color:red;">*</span>联系电话:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<%-- <s:textfield name="e.lxdh" cssClass="weui_input" placeholder="请输入联系电话"></s:textfield> --%>
								<s:textfield name="e.lxdh" cssClass="weui_input" placeholder="请输入联系电话"  onkeyup="value=value.replace(/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,'')" onpaste="value=value.replace(/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,'')" oncontextmenu = "value=value.replace(/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,'')"></s:textfield>
							</div>
						</div>
						<div class="weui_cell">
							<div class="weui_cell_hd" >
								<label class="weui_label"><span style="color:red;">*</span>是否担任其他社团的法定代表人:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<s:bean name="com.kingtopinfo.base.basetype.BaseTypeService" var="sfdrqtstfrdb">
								    <s:param name="code">SFDRQTSTFDDBR</s:param>
								</s:bean>
								<s:select cssClass="weui_select" name="e.sfdrqtstfrdb" list="#sfdrqtstfrdb.l"></s:select>
							</div>
						</div>
						<div class="weui_cell">
							<div class="weui_cell_hd">
								<label class="weui_label"><span style="color:red;">*</span>工作单位:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<s:textfield name="e.gzdw" cssClass="weui_input" placeholder="请输入工作单位,没有请填无"></s:textfield>
							</div>
							<div class="weui_cell_hd">
								<label class="weui_label"><span style="color:red;">*</span>工作单位职务:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<s:textfield name="e.gzdwzw" cssClass="weui_input" placeholder="请输入职务,没有请填无"></s:textfield>
							</div>
						</div>
						<div class="weui_cell">
							<div class="weui_cell_hd">
								<label class="weui_label"><span style="color:red;">*</span>其他社会职务:</label>
							</div>
							<div class="weui_cell_bd weui_cell_primary">
								<s:textfield name="e.shzw" cssClass="weui_input" placeholder="请输入其他社会职务,没有请填无"></s:textfield>
							</div>
						</div>
						
						<div class="weui-row weui-no-gutter">
				<div class="weui-col-5">
				</div>
				
				
				<div class="weui-col-100">
					<div class="weui_cells weui_cells_form">
						<div class="weui_cell" style="background-color: #FAFAFA">
							<div class="weui_cell_bd weui_cell_primary">
								<div style="text-align: center;font-weight: bold;">
									个人简历信息
								</div>
							</div>
						</div>
						<table class="_listStyle" id="frjlTable">
						<thead>
							<tr>
								<td style="text-align: center;width: 36%;">
									自何年月至何年月
								</td>
								<td style="text-align: center;width: 36%;">
									在何地区何单位
								</td>
								<td>
									职务
								</td>
								<td style="width: 120px;">
									<div style="width: 60px;float: right;">
										<s:a cssClass="weui_btn weui_btn_plain_primary weui_btn_operation" href="javascript:void(0);" id="addFrjl">新增</s:a>
									</div>
								</td>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
				
			<div class="weui-col-5">
				</div>
			</div>
						
						<div class="weui_cell">
							<div class="weui_cell_bd weui_cell_primary">
								<div class="weui-row weui-no-gutter">
							    	<div class="weui-col-40">
							    	</div>
							    	<div class="weui-col-20">
							    		<input type="button" class ="weui_btn weui_btn_primary" cssStyle="cursor: pointer;" value="保存" id="sure">
							    	</div>
							    	<div class="weui-col-40">
							    	</div>
							    </div>
						    </div>
						</div>
					</div>
				</div>
				<div class="weui-col-5">
				</div>
			</div>
		</s:form>
		
	</body>

3、后台获取前台传过来的optionList;

public List<TStglRyjlxxEntity> getRyjlxxEntities() throws ParseException{
		List<TStglRyjlxxEntity> frjlList = new ArrayList<TStglRyjlxxEntity>();
		String s = optionList;
		s = s.substring(1, s.length() - 1);
		String[] arr = s.split("},");
		List<String> list = java.util.Arrays.asList(arr);
		TStglRyjlxxEntity  ryjlEntity  = null;
		for (int j = 0; j < list.size(); j++) {
			ryjlEntity = new TStglRyjlxxEntity();
			String a = list.get(j).toString();
			if(j != list.size()-1){
	    		a = list.get(j).toString()+"}";
	    	}else{
	    		a=list.get(j).toString();
	    	}
			JSONObject json = JSONObject.fromObject(a);
			
			ryjlEntity.setUpdateuserid(userid);
			ryjlEntity.setUpdatetime(utime);
			ryjlEntity.setRybh(e.getStfzrbh());
			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
			ryjlEntity.setNyks(sdf.parse(json.get("kssj").toString()));
			if( !"".equals(json.get("jssj").toString())){
				ryjlEntity.setNyjs(sdf.parse(json.get("jssj").toString()));
			}
			ryjlEntity.setDw(json.get("gzdw").toString());
			ryjlEntity.setDrzw(json.get("gzzw").toString());
			ryjlEntity.setVer(1);
			ryjlEntity.setState(1);
			
			frjlList.add(ryjlEntity);
		}
		
		return frjlList;
	}

猜你喜欢

转载自blog.csdn.net/a13069337892/article/details/82415933
今日推荐