原生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)文章
超精準(zhǔn)的javascript驗(yàn)證身份證號(hào)的方法
這篇文章為大家分享了一個(gè)超精準(zhǔn)的javascript驗(yàn)證身份證號(hào)的具體實(shí)現(xiàn)方法，根據(jù)身份證號(hào)對(duì)其進(jìn)行性別的判定，感興趣的小伙伴們可以參考一下2015-11-11
微信小程序?qū)崿F(xiàn)人臉識(shí)別登陸的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)人臉識(shí)別登陸的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
利用MutationObserver實(shí)現(xiàn)計(jì)算首屏?xí)r間
在前端開發(fā)中，優(yōu)化頁(yè)面性能是至關(guān)重要的，計(jì)算首屏?xí)r間是衡量網(wǎng)頁(yè)性能的重要指標(biāo)，本文將介紹如何使用MutationObserver來獲取首屏?xí)r間的最佳實(shí)踐，感興趣的可以了解下2023-07-07
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)上傳視頻功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
three.js中3D視野的縮放實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了three.js中3D視野的縮放實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
寫的一段拖動(dòng)對(duì)象的代碼...2007-01-01
js實(shí)現(xiàn)將選中內(nèi)容分享到新浪或騰訊微博
這篇文章主要介紹了js實(shí)現(xiàn)將選中內(nèi)容分享到新浪或騰訊微博,需要的朋友可以參考下2015-12-12
JavaScript實(shí)現(xiàn)緩動(dòng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)緩動(dòng)動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
基于JS實(shí)現(xiàn)的笛卡爾乘積之商品發(fā)布
本文給大家介紹JS實(shí)現(xiàn)的笛卡爾乘積之商品發(fā)布的相關(guān)內(nèi)容，涉及到j(luò)s笛卡爾積算法的相關(guān)知識(shí)，本文介紹的非常詳細(xì)，具有參考價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
JavaScript Serializer序列化時(shí)間處理示例
JavaScriptSerializer序列化時(shí)間后會(huì)把時(shí)間序列化成N進(jìn)制的鬼數(shù)據(jù) ，下面有個(gè)示例，需要的朋友可以了解下2014-07-07