jquery动态增加表格表单行来插入数据-------遇到的兼容问题和radio问题

环境：struts2-2.2.1，jquery-1.4.4.min.js，eclipse-jee-helios-SR1-win32，access， <%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%&amp

maomaoyu3211

141人浏览 · 2010-11-17 20:07:35

maomaoyu3211 · 2010-11-17 20:07:35 发布

环境：struts2-2.2.1，jquery-1.4.4.min.js，eclipse-jee-helios-SR1-win32，access，

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style type="text/css">
#tb .td {
	text-align: center;
	font-weight: bold;
	background-color: #6699FF;
	color: #FFFFFF;
	border: 1px solid #000;
}
</style>
<script type="text/javascript" src="/erpweb/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#tb tr").eq(2).hide();
		var i = 0;
		$("#BtAdd").click(function() {
			var tr = $("#tb tr").eq(2).clone(true);//
			tr.find("td").get(0).innerHTML = ++i;
			tr.show();
			tr.appendTo("#tb"); 
		});
		$("#BtDel").click(function() {
			$("#tb tr:gt(2)").each(function() {
				if ($(this).find("#CK").attr("checked") == true) {//
					$(this).remove();
				}
			});
			i = 0;
			$("#tb tr:gt(2)").each(function() {
				$(this).find("td").get(0).innerHTML = ++i;//
			});
			$("#CKA").attr("checked", false);//
		});
		$("#CKA").click(function() {
			$("#tb tr:gt(2)").each(function() {
				$(this).find("#CK").attr("checked",$("#CKA").attr("checked"));
			});
		});
		
		$("#nan").click(function() {
		//	$(this).next().next().eq(0).attr("checked")==true?$(this).next().next().eq(0).attr("checked",false):$(this).next().next().eq(0).attr("checked",true);//IE6
	//	$(this).next().eq(0).attr("checked")==true?$(this).next().eq(0).attr("checked",false):$(this).next().eq(0).attr("checked",true);//firefox3
			$(this).nextAll("#nv").attr("checked")==true?$(this).nextAll("#nv").attr("checked",false):$(this).nextAll("#nv").attr("checked",true);
		});
		$("#nv").click(function() {
			//$(this).prev().prev().eq(0).attr("checked")==true?$(this).prev().prev().eq(0).attr("checked",false):$(this).prev().prev().eq(0).attr("checked",true);//IE6
			//$(this).prev().prev().eq(0).attr("checked")==true?$(this).prev().prev().eq(0).attr("checked",false):$(this).prev().prev().eq(0).attr("checked",true);firefox3
			$(this).prevAll("#nan").attr("checked")==true?$(this).prevAll("#nan").attr("checked",false):$(this).prevAll("#nan").attr("checked",true);
		});
	});
</script>
</head>
<body>
<s:actionerror />
<br />
<center>
<s:form id="form1" action="/add">
<div>
<table id="tb" style="border: 1px solid #000;">
	<tr>
		<td colspan="7" style="text-align: right"><input id="BtAdd"
			type="button" value="添加" /> &nbsp; <input id="BtDel" type="button"
			value="删除" /> &nbsp; <input id="BtDel" type="submit" " value="注册" />
		</td>
	</tr>
	<tr>
		<td class="td" style="width: 25px;"></td>
		<td class="td" style="width: 59px;"><input id="CKA" name="CKA"
			type="checkbox" />删除</td>
		<td class="td" style="width: 160px;">EMPID</td>
		<td class="td" style="width: 160px;">NAME</td>
		<td class="td" style="width: 160px;">PASSWORD</td>
	<td class="td" style="width: 80px;">SEX</td>
	
	<tr>
		<td style="text-align: center"></td>
		<td style="text-align: center"><input id="CK" type="checkbox"
			name="CK" /></td>
		<td style="text-align: center"><input id="empid" type="text"
			name="empid" /></td>
			<td style="text-align: center"><input id="name" type="text"
			name="name" /></td>
		<td style="text-align: center"><input id="password" type="password"
			name="password" /></td>
			<td style="text-align: center"><input id="nan" type="checkbox" name="sex"
			value="男" checked="true" >男</input>
			<input id="nv" type="checkbox" name="sex" value="女"  >女</input></td>
			<!--<td style="text-align: center"><input id="nan" type="radio" name="sex"
			value="男" checked="true" >男</input>
			<input id="nv" type="radio" name="sex" value="女"  >女</input></td>
			-->
			</tr>
</table>
</div>
</s:form>
</center>
</body>
</html>

第二个<tr>就是用来增加行时的副本。

radio问题：

最后男女用单选项时（代码的红色处），增加行后，犹豫他们的name都是sex，所以当你选择时就只能选择所有行的一个。所以我换成了checkbox。

浏览器兼容问题：

当换成checkbox时（代码的蓝色），为了实现男和女必选一个时又写了上面蓝色的jquery代码，主要实现前后相邻节点访问。

刚开始用的是：

//	$(this).next().eq(0).attr("checked")==true?$(this).next().eq(0).attr("checked",false):$(this).next().eq(0).attr("checked",true);//firefox3

但发现只有firefox，opera可以用，ie6不好用！后来想了想是不是中将“空白”当成一个子元素处理了（以前在李刚的疯狂ajax中访问相邻<li>看到过这个毛病），于是换成了：

	//	$(this).next().next().eq(0).attr("checked")==true?$(this).next().next().eq(0).attr("checked",false):$(this).next().next().eq(0).attr("checked",true);//IE6

结果和预料的一样，这个只能IE6用。

最后写了个兼容的代码，用nextAll找所有相邻的就可以兼容了：

$(this).nextAll("#nv").attr("checked")==true?$(this).nextAll("#nv").attr("checked",false):$(this).nextAll("#nv").attr("checked",true);

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

附：http://googledave.iteye.com/blog/459702 的实现

CheckBox单选

    Java代码  
  
http://www.cnblogs.com/mextb1860/archive/2008/04/11/1147841.html  

方法一

    Html代码  
  
<BODY>     
 <input type="checkbox" name="cbox" value="cbox1" onClick="chooseOne(this);">checkBox1     
 <input type="checkbox" name="cbox" value="cbox2" onClick="chooseOne(this);">checkBox2     
 <input type="checkbox" name="cbox" value="cbox3" onClick="chooseOne(this);">checkBox3     
 <input type="checkbox" name="cbox" value="cbox4" onClick="chooseOne(this);">checkBox4     
 </BODY>   
  
 <script>     
     //chooseOne()函式，參數為觸發該函式的元素本身     
     function chooseOne(cb){     
         //先取得同name的chekcBox的集合物件     
         var obj = document.getElementsByName("cbox");     
         for (i=0; i<obj.length; i++){     
             //判斷obj集合中的i元素是否為cb，若否則表示未被點選     
             if (obj[i]!=cb) obj[i].checked = false;     
             //若是 但原先未被勾選 則變成勾選；反之 則變為未勾選     
             //else  obj[i].checked = cb.checked;     
             //若要至少勾選一個的話，則把上面那行else拿掉，換用下面那行     
             else obj[i].checked = true;     
         }     
     }     
 </script>   

方法二

    Html代码  
  
<BODY>     
 <div id="mydiv">     
 <input type="checkbox" name="cbox1" value="cbox1" onClick="chooseOne(this);">checkBox1    
 <input type="checkbox" name="cbox2" value="cbox2" onClick="chooseOne(this);">checkBox2    
 <input type="checkbox" name="cbox3" value="cbox3" onClick="chooseOne(this);">checkBox3    
 <input type="checkbox" name="cbox4" value="cbox4" onClick="chooseOne(this);">checkBox4    
 </div>     
</BODY>   
  
  
 <script>     
     //chooseOne()函式，參數為觸發該函式的元素本身     
     function chooseOne(cb) {     
         //先取得Div元素     
         var obj = document.getElementById("mydiv");     
         ///判斷obj中的子元素i是否為cb，若否則表示未被點選     
         for (i=0; i<obj.children.length; i++){     
             if (obj.children[i]!=cb)    obj.children[i].checked = false;     
             //若是 但原先未被勾選 則變成勾選；反之 則變為未勾選     
             else    obj.children[i].checked = cb.checked;     
             //若要至少勾選一個的話，則把上面那行else拿掉，換用下面那行     
             //else obj.children[i].checked = true;     
         }     
     }     
 </script>   