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"%>
<%@ 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="添加" /> <input id="BtDel" type="button"
value="删除" /> <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单选
- http://www.cnblogs.com/mextb1860/archive/2008/04/11/1147841.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>
方法二
- <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>