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

最新推荐文章于 2023-12-21 11:55:40 发布

cactusz

最新推荐文章于 2023-12-21 11:55:40 发布

阅读量721

点赞数

分类专栏： jQuery JavaScript HTML Ajax Eclipse

本文链接：https://blog.csdn.net/cactusz/article/details/74559234

版权

本文讲述了在使用jQuery动态添加表格行时遇到的Radio单选和Checkbox多选的兼容性问题。在Struts2环境下，由于Radio名称相同导致只能选择一行的问题，作者改用Checkbox并实现了互斥选择的jQuery代码。然而，这引发了浏览器兼容问题，主要是IE6与其他浏览器的差异。通过不断调整和测试，作者最终找到了一个兼容所有浏览器的解决方案。文中还提供了两种不同的Checkbox单选实现方法。

摘要由CSDN通过智能技术生成

环境：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 的实现