`
啸笑天
  • 浏览: 3438116 次
  • 性别: Icon_minigender_1
  • 来自: China
社区版块
存档分类
最新评论

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

jQueryJavaScriptHTMLAjaxEclipse 
阅读更多

环境：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代码 
  1. http://www.cnblogs.com/mextb1860/archive/2008/04/11/1147841.html  



方法一

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



方法二

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

 

 

 

 

分享到：
| Oracle的JDBC驱动的版本说明
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics