相思资源网 Design By www.200059.com
本文实例讲述了原生JS和JQuery动态添加、删除表格行的方法。分享给大家供大家参考。具体分析如下：
下面HTML代码作用：提交一个表单，将复选框的值提交（复选框的值等于后面的文本框，复选框和文本框处在同一行，可以动态添加和删除）。
原生态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">
/**验证表单复选框是否有选择*/
function isValidChkSelect(frm){
var chk = frm.chked;
if(chk == undefined){
return;
}
var len = frm.chked.length;
if(chk.length == undefined){
// 只有一个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>";
}
/**删除行对象*/
function delRow(obj){
//obj.parentNode.parentNode.removeNode(true); // Firefox不兼容
var new_tr = obj.parentNode.parentNode;
var tmp = new_tr.parentNode;
tmp.removeChild(new_tr); // 删除子节点
}
/**将文本框值赋给同一行对应的复选框*/
function setValue(obj, obj_chk){
obj_chk.value = obj.value;
}
function doSubmit(frm){
if(isValidChkSelect(frm) == false){
alert("选择不能少于一项");
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];// 复选框对象
if(valid(obj, obj_chk)){
setValue(obj, obj_chk);// 同一行的文本框值 赋值给 复选框
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("请输入正确的邮件地址！");
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>
允许发送地址
<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="/UploadFiles/2021-04-02/jquery-1.6.4.min.js">希望本文所述对大家的javascript程序设计有所帮助。
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无原生JS和JQuery动态添加、删除表格行的方法的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。