当前位置: 代码迷 >> Web前端 >> jquery平添删除表格行
  详细解决方案

jquery平添删除表格行

热度:384   发布时间:2012-06-27 14:20:09.0
jquery添加删除表格行

jqury做的一个添加删除表格行的例子,这是在倒数第二行插入一个东西的示例

<%@page language="java" contentType="text/html; charset=GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ taglib uri="http://www.htjs.net" prefix="htjs"%>
<head>
<link href="inc/platform/css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/server/hmykt/public/inc/css/stylesheet_hmykt.css" type="text/css" />
<script type="text/javascript" src="/inc/platform/js/validator.js"/>
<script type="text/javascript" src="/server/hmykt/ggxxgl/jmggxx/js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="/inc/platform/js/jQuery.js"></</script>
<script type="text/javascript" src="/inc/platform/js/ajax.js"></script>
<script src="/inc/platform/js/qx.js"></script>
<jsp:useBean id="add" class="net.htjs.hmykt.web.ggxxgl.jmggxx.ggxxcj.AddJmxx"/>
<title>居民公共信息增加页面</title>
<script type="text/javaScript">
//预留方法,使用读卡器读出数据
function read()
{
	alert("功能暂不可用");
}
//添加行
function appendRow(){
	var tr = $("#jmcyxm1").clone(false);//克隆一行
	tr.find("td:last").html("<img src='/server/hmykt/public/images/images/del_01.gif' onclick='delRow(this);'title='删除'>"); 
	tr.insertBefore("#table2 tr:last");//把这行加到表格的倒数第二行,表格添加完毕
}
//删除相对应的行
function delRow(rows)
{
	$(rows).parent("td").parent("tr").remove();
}
//检查项目信息当中是否有重复的补贴项目,如果有重复的,则提示
function checkTable2()
{
	//得到补贴项目代码,然后做比较,比较其中的值是否有重复.疑问,如何判断出补贴项目不为空
	var btxm = $("form select[name=BTXM]");
	var dm_xzqh = $(":input[name=DM_XZQH]");	//行政区划
	var dm_yhlb = $("form select[name=DM_YHLB]");//银行类别
	var hh_khyh = $(":input[name=HH_KHYH]");//开户银行
	var yhzh = $(":input[name=YHZH]");     //银行帐号
	var mc_kh = $(":input[name=MC_KH]")    //开户户名
	for(var i=0;btxm[i]!=null;i++)
		{
		if(btxm[i].value=="")
						{
						alert("补贴项目不能为空,请检查后重新输入");
						return false;
						}
		if(dm_xzqh[i].value=="")
			{
						alert("行政区划不能为空,请检查后重新输入");
						return false;
			}
		//if(hh_khyh[i].value=="")
			//{
						//alert("请选择开户银行");
						//return false;
			//}
		if(yhzh[i].value=="")
			{
						alert("银行帐号不能为空");
						return false;
			}
		if(mc_kh[i]=="")
			{
						alert("请输入开户户名");
						return false;
			}
		for(var k=0;k<i;k++)
			{
					//检查是否有重复的补贴项目
					if(btxm[i].value==btxm[k].value)
						{
					alert("不能有相同的补贴项目");
					return false;
						}
			}
		}
	return true;
	
}
//表单提交
function jmggxxFormSubmit()
{
	if(!Validator.Validate(jmggxxForm))
		{
			return;
		}
	if(!checkTable2())
		{
		return;
		}
	if($("#MEMO").val().length>200)
		{
		alert("备注不能超过200个字符");
		return;
		}
	document.jmggxxForm.submit();
}
//返回按纽
function returnParent()
{
		window.history.back();
}
</script>
</head>
<body>
<!-- 开始表单 表单提交要修改-->
<form name="jmggxxForm" method="post" action="addjmxxMiddle.jsp" target="iframe1"> 
<input type="hidden" name="qxxkdm" id="qxxkdm" value="<%=request.getParameter("qxxkdm") %>"/>
			<table border="0" cellpadding="2" cellspacing="1" width="100%" class="tablebgW">
	 			<tr class="content">
					<td class="tableCenter" colspan="4">居民公共信息采集</td>
				</tr>
				<tr class="back5">
					<td width="15%" class="tableLeft">身份证号</td>
					<td width="35%" class="tableRight"><%=request.getParameter("SFZH")%>
					<!-- 隐藏框。放置qxxkdm 和sfzh -->
					<input type="hidden" name="qxxkdm" id="qxxkdm" value="<%=request.getParameter("qxxkdm") %>"/>
					<input type="hidden" name="SFZH" id="SFZH" value="<%=request.getParameter("SFZH")%>"/>
					</td>
						<td width="15%" class="tableLeft" align="left">行政区划</td>
						<td width="35%" class="tableRight">
							<table>
								<tr>
									<td>
										<input type="text" id="XZQH" name="XZQH" value="" onclick="" dataType="Require" msg="行政区划不能为空"/>
										<input type="hidden" name=""/>
									</td>
									<td><font color="red">&nbsp;必选</font></td>
								</tr>
							</table>
						</td>
				</tr>
				<tr class="back5">
					<td width="15%" class="tableLeft">姓名</td>
					<td width="35%" class="tableRight"><input type="text" name="JMXM" id="JMXM" maxlength="25" 
					size="25" value="" dataType="Require" msg="姓名不能为空"/>
					<font color="red">必填</font>
					</td>
					<td width="15%" class="tableLeft">民族</td>
					<td width="35%" class="tableRight">
					<!-- 开始民民族选择 暂定为页面写死 -->
				 <select name="DM_MZ" id="DM_MZ" style="width:180px" >
			 		<option value="01">汉族</option>
					<option value="02">蒙古族</option>
					<option value="03">回族</option>
					<option value="04">藏族</option>
					<option value="05">维吾尔族</option>
					<option value="06">苗族</option>
					<option value="07">彝族</option>
					<option value="08">壮族</option>
					<option value="09">布依族</option>
					<option value="10">朝鲜族</option>
					<option value="11">满族</option>
					<option value="12">侗族</option>
					<option value="13">瑶族</option>
					<option value="14">白族</option>
					<option value="15">土家族</option>
					<option value="16">哈尼族</option>
					<option value="17">哈萨克族</option>
					<option value="18">傣族</option>
					<option value="19">黎族</option>
					<option value="20">僳僳族</option>
					<option value="21">佤族</option>
					<option value="22">畲族</option>
					<option value="23">高山族</option>
					<option value="24">拉祜族</option>
					<option value="25">水族</option>
					<option value="26">东乡族</option>
					<option value="27">纳西族</option>
					<option value="28">景颇族</option>
					<option value="29">柯尔克孜族</option>
					<option value="30">土族</option>
					<option value="31">达斡尔族</option>
					<option value="32">仫佬族</option>
					<option value="33">羌族</option>
					<option value="34">布朗族</option>
					<option value="35">撤拉族</option>
					<option value="36">毛难族</option>
					<option value="37">仡佬族</option>
					<option value="38">锡伯族</option>
					<option value="39">阿昌族</option>
					<option value="40">普米族</option>
					<option value="41">塔吉克族</option>
					<option value="42">怒族</option>
					<option value="43">乌孜别克族</option>
					<option value="44">俄罗斯族</option>
					<option value="45">鄂温克族</option>
					<option value="46">崩龙族</option>
					<option value="47">保安族</option>
					<option value="48">裕固族</option>
					<option value="49">京族</option>
					<option value="50">塔塔尔族</option>
					<option value="51">独龙族</option>
					<option value="52">鄂伦春族</option>
					<option value="53">赫哲族</option>
					<option value="54">门巴族</option>
					<option value="55">珞巴族</option>
					<option value="56">基诺族</option>
				</select>
						<font color="red">必选</font>
					</td>
				</tr>
				<tr class="back5">
				<td width="15%" class="tableLeft">性别</td>
					<td width="35%" class="tableRight">
					<select name="GENDER" style="width:180px" dataType="Require" msg="性别不能为空">
					<option value="1">男</option>
					<option value="2">女</option>
					</select><font color="red">必选</font>
					</td>
					<td class="tableLeft"></td>
					<td class="tableLeft"></td>
				</tr>
				<tr class="back5">
					<td width="15%" class="tableLeft">户口性质</td>
					<td width="35%" class="tableRight">
						
						<select name="DM_HKLB" id="DM_HKLB" style="width:180px" dataType="Require" msg="户口不能为空">
						<option value="1">农业户口</option>
						<option value="2">城镇户口</option>
						</select>
						<font color="red">必选</font>
					</td>
					<td width="15%" class="tableLeft">邮政编码</td>
					<td width="35%" class="tableRight">
					<input type="text" name="YZBM" id="YZBM" maxlength="16" size="25" value="" /></td>
				</tr>
				<tr class="back5">
					<td width="15%" class="tableLeft">手机号码</td>
					<td width="35%" class="tableRight">
					<input type="text" name="SJHM" id="SJHM" maxlength="11" size="25" value="" dataType="Mobile" msg="请输入正确的手机号码"/></td>
					<td width="15%" class="tableLeft">固定电话</td>
					<td width="35%" class="tableRight">
					<input type="text" name="LXDH" id="LXDH" maxlength="30" size="25" value="" /></td>
				</tr>
				<tr class="back5">
					<td width="15%" class="tableLeft">户籍住址</td>
					<td width="35%" class="tableRight" colspan="3"><input type="text" name="HJZZ" id="HJZZ" maxlength="30" size="80" value="" /></td>
				</tr>
				<tr class="back5">
					<td width="15%" class="tableLeft">现居住地</td>
					<td width="35%" class="tableRight" colspan='3'>
					<input type="text" name="XJZD" id="XJZD" maxlength="30" size="80" value="" /></td>
				</tr>
				<tr class="back5">
					<td width="15%" class="tableLeft">备注</td>
					<td width="35%" class="tableRight" colspan="3">
					<!-- 解析onkeyup的方法是一个什么东西 -->
					<textarea name="MEMO" id="MEMO" cols="79" rows="3" value="" >
					</textarea>
					</td>
				</tr>
			</table> 
			<br/>
			<!-- 开始参于项目信息填写 -->
			<table border="0" cellpadding="2" cellspacing="1" width="100%" class="tablebgW" id="table2">
				 <tr class="content" >
					<td  class="tableCenter" width="25%">参与项目</td>
					<td  class="tableCenter" width="15%">所在行政区划</td>
					<td  class="tableCenter" width="15%">开户银行</td>
					<td  class="tableCenter" width="15%">银行网点</td>
					<td  class="tableCenter" width="15%">银行账号</td>
					<td  class="tableCenter" width="15%">开户户名</td>
					<td  class="tableCenter" width="15%">操作</td>
				</tr>
				<tr class="back5" id="jmcyxm1" >
					<td  class="tableCenter" width="25%"> 
							<!-- 补贴项目下拉菜单,需要从数据库里进行读取 到时候写一个htjs:select下拉菜单 -->
							<htjs:select sid="SELECT_ALL_BTXM" value="DM_BTXM" label="MC_BTXM" name="BTXM" associate="" >
							</htjs:select>
					</td>
					<!-- 所在行政区划 -->
					<td  class="tableCenter" width="25%"> 
						 <input type="text"   name="DM_XZQH"   onclick="" size="10" />
						 <a href="javascript:void(0);" onclick=""></a>
						 <img src="/server/hmykt/public/images/images/bi.gif" title="选择" style="cursor: hand">
					</td>
					<!-- 选择银行  -->
					<td class="tableCenter"  width="12.5%" > 
							<select  name="DM_YHLB" onchange="" dataType="Require"  msg="银行不能为空">
								
									<option  value="01">农业银行</option>
								
									<option  value="02">邮政银行</option>
								
									<option  value="03">农村信用社</option>
								
									<option  value="04">建设银行</option>
								
									<option  value="05">地方商业银行</option>
								
							</select>
					</td>
					<!-- 银行网点 银行网点是跟开户银行选择的银行挂勾的  -->
					<td  class="tableCenter" width="12.5%"> 
						 <input type="text"   name="HH_KHYH"   size="10"  onclick="" />
						 <a href="" onclick=""></a>
						 <img src="/server/hmykt/public/images/images/bi.gif"  title="选择试验" style="cursor: hand" />
					</td>
					<!-- 银行帐号 -->
					<td class="tableCenter" width="12.5%"> 
						<input type="text"  size="10" name="YHZH" value="银行帐号" />
					</td>
					<!-- 开户户名 -->
					<td  class="tableCenter" width="12.5%">
						<input type="text"  size="10" name="MC_KH"  value="试验二" /> 
					</td>
					<!-- 最后一个td -->
					<td>
					</td>
				</tr>
				 <tr class="back5" id="tianjia">
					<td   class="tableRight" colspan="7"> 
					  <input type="button" class="button1" name="" id="" value="添 加" onclick="appendRow()"/>&nbsp;&nbsp;
					</td>
				</tr>
			</table> 			
			<table>
				 <tr class="back5">
					<td width="15%" class="tableCenter"> 
							<input type="button" name="b_read" Class="button1"
								value="读取" onclick="read()" />
							<input type="button" name="b_newsave" value="保 存" onclick="jmggxxFormSubmit()" class="button1" />
							<input type="button" name="b_tomain" value="返 回" onclick="returnParent()" class="button1" />
					</td>
				</tr>
			</table> 
</form>
<div style="visibility:hidden; display:none">
<iframe id="iframe1" name="iframe1" >
</iframe>
</div>
</body>
</html>
?
  相关解决方案