原生JS和JQuery動(dòng)態(tài)添加、刪除表格行的方法
更新時(shí)間：2015年05月28日 15:30:56 作者：jayqean
這篇文章主要介紹了原生JS和JQuery動(dòng)態(tài)添加、刪除表格行的方法,涉及javascript針對(duì)頁(yè)面元素的動(dòng)態(tài)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了原生JS和JQuery動(dòng)態(tài)添加、刪除表格行的方法。分享給大家供大家參考。具體分析如下：
下面HTML代碼作用：提交一個(gè)表單，將復(fù)選框的值提交（復(fù)選框的值等于后面的文本框，復(fù)選框和文本框處在同一行，可以動(dòng)態(tài)添加和刪除）。
原生態(tài)JS版：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript添加行demo</title>
<script type="text/javascript">
/**驗(yàn)證表單復(fù)選框是否有選擇*/
function isValidChkSelect(frm){
var chk = frm.chked;
if(chk == undefined){
return;
}
var len = frm.chked.length;
if(chk.length == undefined){
// 只有一個(gè)checkbox
if (chk.checked == true) {
return true;
}
} else {
for(var i = 0; i < chk.length; i++) {
if (chk[i].checked == true) {
return true;
}
}
}
return false;
}
/**選擇所有文本框*/
function selectAll(frm){
for (var i = 0; i < frm.elements.length; i++){
var e = frm.elements[i];
if (e.name != 'chkall' && e.type == 'checkbox')
e.checked = frm.chkall.checked;
}
}
/**添加新行*/
function addNew(){
var objMyTable = document.getElementById("tbl");
var index = objMyTable.rows.length - 1;
var nextRow = objMyTable.insertRow(index);// 插入新行
var objCel_0 = nextRow.insertCell(0);// 添加單元格
objCel_0.innerHTML = "<input type='checkbox' name='chked' value='' />";
var objCel_1 = nextRow.insertCell(1);
// nextRow.rowIndex -- 行索引
objCel_1.innerHTML = "<input type='text' name='newRow"+nextRow.rowIndex+"' /> <a href='#' onclick='delRow(this)'>刪除</a>";
}
/**刪除行對(duì)象*/
function delRow(obj){
//obj.parentNode.parentNode.removeNode(true); // Firefox不兼容
var new_tr = obj.parentNode.parentNode;
var tmp = new_tr.parentNode;
tmp.removeChild(new_tr); // 刪除子節(jié)點(diǎn)
}
/**將文本框值賦給同一行對(duì)應(yīng)的復(fù)選框*/
function setValue(obj, obj_chk){
obj_chk.value = obj.value;
}
function doSubmit(frm){
if(isValidChkSelect(frm) == false){
alert("選擇不能少于一項(xiàng)");
return false;
}
for(var i = 0; i < document.getElementsByTagName("input").length; i++) {
var obj = document.getElementsByTagName("input")[i];
if(obj.type == "text" && obj.name.substring(0, 6) == "newRow"){
var obj_chk = obj.parentNode.parentNode.childNodes[0].childNodes[0];// 復(fù)選框?qū)ο?
if(valid(obj, obj_chk)){
setValue(obj, obj_chk);// 同一行的文本框值 賦值給 復(fù)選框
continue;
} else {
return false;
}
}
}
return true;
}
function valid(obj, obj_chk){
if(obj_chk.checked){
var patrn = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(obj.value == ""){
alert("添加的地址不能為空！");
return false;
}
if(!patrn.test(obj.value)){
alert("請(qǐng)輸入正確的郵件地址！");
return false;
}
}
return true;
}
</script>
</head>
<body>
<form method="post" action="" onsubmit="return doSubmit(this)">
<table id="tbl" border="1" cellpadding="4" style="border-collapse: collapse" width="100%">
<tr>
<td><input type="checkbox" name='chkall' onclick="selectAll(this.form)"/>全部選擇</td>
<td>
允許發(fā)送地址
<a href="#" onclick="addNew()">添加新地址</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chked" value="mailfrom@gmail.com">
</td>
<td>mailfrom@gmail.com</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交" name="B1">
</td>
</tr>
</table>
</form>
</body>
</html>
JQuery版：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery添加行demo</title>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
// 全部選擇的點(diǎn)擊事件
$("input[name='chkall']").click(function(){
$("input[name='chked']").attr("checked", this.checked);
});
});
var row_cur_index = 0;// 插入行的當(dāng)前索引
/**添加新行*/
function addNew(){
var row_id = "tr" + row_cur_index;// 所插入行的id
var row_obj = "<tr id='"+row_id+"'><td><input type='checkbox' class='ck_class' name='chked' value='' /></td><td><input type='text' name='newRow"+row_cur_index+"' /> <a href='#' onclick='delRow("+row_id+")'>刪除</a></td></tr>";
$("#topRow").before(row_obj); // 插入行
row_cur_index = row_cur_index + 1;
}
/**將文本框值賦給同一行對(duì)應(yīng)的復(fù)選框*/
function setValue(row_index, value){
var row_id = "#tr" + row_index;
$(row_id).find(":checked").val(value);
}
/**刪除行對(duì)象*/
function delRow(row_id){
$(row_id).remove(); // 刪除匹配row_id的元素
}
function doSubmit(frm){
/**判斷復(fù)選框是否有選*/
if($("input[name='chked']:checked").size() == 0){
alert("選擇不能少于一項(xiàng)");
return false;
}
try {
$("tr[id^='tr']").each(function(){
var tmp_row_index = this.id.substring(2); // 當(dāng)前行索引
if($("#tr"+tmp_row_index).find(":checkbox").attr("checked")){
var patrn = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var input_value = $("input[name='newRow"+tmp_row_index+"']").val(); // 文本框值
setValue(tmp_row_index, this.value);
if(input_value == "") throw "Err1";
if (!patrn.test(input_value)) throw "Err2";
}
});
} catch (e) {
if(e == "Err1")
alert("添加的地址不能為空！");
if(e == "Err2")
alert("請(qǐng)輸入正確的郵件地址！");
return false;
}
return true;
}
</script>
</head>
<body>
<form method="post" action="" onsubmit="return doSubmit(this)">
<table id="tbl" border="1" cellpadding="4" style="border-collapse: collapse" width="100%">
<tr>
<td><input type="checkbox" name='chkall' />全部選擇</td>
<td>
允許發(fā)送地址
<a href="#" onclick="addNew()">添加新地址</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chked" value="mailfrom@gmail.com">
</td>
<td>mailfrom@gmail.com</td>
</tr>
<tr id="topRow">
<td colspan="2">
<input type="submit" value="提交" name="B1">
</td>
</tr>
</table>
</form>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS/jQuery實(shí)現(xiàn)超簡(jiǎn)單的Table表格添加,刪除行功能示例
- js動(dòng)態(tài)添加表格逐行添加、刪除、遍歷取值的實(shí)例代碼
- js實(shí)現(xiàn)添加刪除表格（兩種方法）
- JS實(shí)現(xiàn)動(dòng)態(tài)表格的添加，修改，刪除功能(推薦)
- 基于JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加刪除表格的行
- js簡(jiǎn)單的表格添加行和刪除行操作示例
- 動(dòng)態(tài)添加刪除表格行的js實(shí)現(xiàn)代碼
- JS小功能(操作Table--動(dòng)態(tài)添加刪除表格及數(shù)據(jù))實(shí)現(xiàn)代碼
- JavaScript動(dòng)態(tài)操作表格實(shí)例(添加,刪除行,列及單元格)
- js動(dòng)態(tài)實(shí)現(xiàn)表格添加和刪除操作
相關(guān)文章
JavaScript中常見(jiàn)的數(shù)據(jù)類(lèi)型判斷方法小結(jié)
在?JS?編程中,正確判斷數(shù)據(jù)類(lèi)型是必備技能,也是面試常問(wèn)的內(nèi)，本文將探討四種常用的數(shù)據(jù)類(lèi)型判斷方法，通過(guò)了解它們的特點(diǎn)和適用范圍,能夠更好地處理不同數(shù)據(jù)類(lèi)型的情況,避免出現(xiàn)錯(cuò)誤和提升代碼質(zhì)量,需要的朋友可以參考下2023-06-06
async/await實(shí)現(xiàn)Promise.all()的方式
Promise.all() 方法接收一個(gè) promise 的 iterable 類(lèi)型的輸入，并且只返回一個(gè)Promise實(shí)例，并且輸入的所有 promise 的 resolve 回調(diào)的結(jié)果是一個(gè)數(shù)組，對(duì)async/await實(shí)現(xiàn)Promise.all()相關(guān)知識(shí)感興趣的朋友一起看看吧2022-12-12
js實(shí)現(xiàn)省市聯(lián)動(dòng)效果的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)js實(shí)現(xiàn)省市聯(lián)動(dòng)效果的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái),希望對(duì)大家有所幫助2014-02-02
firefox火狐瀏覽器與與ie兼容的2個(gè)問(wèn)題總結(jié)
這幾天遇到幾個(gè)頭疼的火狐與ie兼容問(wèn)題整理下來(lái)，希望對(duì)需要的朋友有所幫助。2010-07-07
javascript權(quán)威指南 學(xué)習(xí)筆記之變量作用域分享
最近一直在看《javascript權(quán)威指南 第五版》，變量作用域這一章，看得真的有點(diǎn)累。不過(guò)，收獲還是多多。2011-09-09
這篇文章主要為大家詳細(xì)介紹了openlayers實(shí)現(xiàn)地圖彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
javascript 函數(shù)聲明與函數(shù)表達(dá)式的區(qū)別介紹
javascript中的函數(shù)聲明與函數(shù)表達(dá)式使用比較頻繁，可能很多的朋友都不知道他們之間的區(qū)別，在此為大家詳細(xì)介紹下，希望對(duì)大家有所幫助2013-10-10
圖片自動(dòng)縮小的js代碼,用以防止圖片撐破頁(yè)面
圖片自動(dòng)縮小的js代碼,用以防止圖片撐破頁(yè)面...2007-03-03
js模擬濾鏡的圖片漸顯效果...2007-02-02
基于js實(shí)現(xiàn)復(fù)制內(nèi)容到操作系統(tǒng)粘貼板過(guò)程解析
這篇文章主要介紹了基于js實(shí)現(xiàn)復(fù)制內(nèi)容到操作系統(tǒng)粘貼板過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10