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>
相關文章
- 關於動態表單遇到的一些問題
- jQuery 遇到問題記錄jQuery
- JavaScript動態建立表格和增加表格的行JavaScript
- 2017年秋季遇到的相容問題總結
- java建立web動態網頁遇到的問題JavaWeb網頁
- 請教個問題執行 httprunner 遇到的問題HTTP
- jQuery動態新增和刪除表格行jQuery
- 資料標準化遇到的問題
- 用筆記來記錄遇到的問題：釋出版本和非釋出版本遇到的問題筆記
- 解決hive資料庫 插入資料很慢的問題Hive資料庫
- 向SQLServer插入單引號問題SQLServer
- 動態規劃問題為什麼要畫表格？動態規劃
- Springboot整合mybatis實現多資料來源所遇到的問題Spring BootMyBatis
- mybase 自動插入很多空行的問題
- 動態頁面資料載入不全的問題
- JDBC用ResultSet訪問大量資料時會遇到的問題JDBC
- linux遇到的問題Linux
- Vagrant 遇到的問題
- Homestead 遇到的問題
- sudo 遇到的問題
- JackJson遇到的問題JSON
- mysql 遇到的問題MySql
- WangEditor遇到的問題
- iview 表單提交資料的時候驗證問題View
- 執行docker run所遇到的問題Docker
- 【求助各位大佬】【急】pytest 動態引數化遇到的問題
- Spring 下，關於動態資料來源的事務問題的探討Spring
- apollo配置中心啟動遇到的問題
- 移動端相容性問題
- 遇到的編碼問題、時區問題整理
- 遇到奇葩問題
- obsidian和typora圖片相容問題
- element-pluls中的動態el-menu中遇到的問題
- jQuery列表動態增加和刪除jQuery
- 你遇到過的相容性問題以及解決辦法
- 使用git遇到的問題Git
- SpringBoot遇到的某些問題Spring Boot
- 我遇到的小白問題
- React Native遇到的問題React Native