原生JS和JQuery动态添加、删除表格行的方法_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

原生JS和JQuery动态添加、删除表格行的方法_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:57 PM

jquery js 删除动态添加表格行

本文实例讲述了原生JS和JQuery动态添加、删除表格行的方法。分享给大家供大家参考。具体分析如下：

下面HTML代码作用：提交一个表单，将复选框的值提交（复选框的值等于后面的文本框，复选框和文本框处在同一行，可以动态添加和删除）。

原生态JS版：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<!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="jquery-1.6.4.min.js"></script> 
<script type="text/javascript"> 
 $("document").ready(function(){ 
  // 全部选择的点击事件 
  $("input[name='chkall']").click(function(){ 
  $("input[name='chked']").attr("checked", this.checked); 
  }); 
 }); 
 var row_cur_index = 0;// 插入行的当前索引 
 /**添加新行*/
 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; 
 } 
 /**将文本框值赋给同一行对应的复选框*/
 function setValue(row_index, value){ 
  var row_id = "#tr" + row_index; 
  $(row_id).find(":checked").val(value); 
 } 
 /**删除行对象*/
 function delRow(row_id){ 
  $(row_id).remove(); // 删除匹配row_id的元素 
 } 
 function doSubmit(frm){ 
  /**判断复选框是否有选*/
  if($("input[name='chked']:checked").size() == 0){ 
  alert("选择不能少于一项"); 
  return false; 
  } 
  try { 
  $("tr[id^='tr']").each(function(){ 
   var tmp_row_index = this.id.substring(2); // 当前行索引 
   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("请输入正确的邮件地址！");  
   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> 
   允许发送地址 
   <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>

登录后复制

希望本文所述对大家的javascript程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7724

Java教程

1643

CakePHP 教程

1396

Laravel 教程

1290

PHP教程

1233

显示更多

Related knowledge

inetpub文件夹可以删除吗？快速删除C盘inetpub文件夹的方法 Mar 13, 2024 pm 02:00 PM

　　电脑C盘发现有个inetpub文件夹占用极大的内存，这个inetpub是什么文件夹？可以直接删除吗？其实inetpub是IIS服务端的一个文件夹，IIS全称InternetInformationServices，也就互联网信息服务，是可以搭建网站、调试网站用的，如果不需要的话，可以将其卸载掉。　　具体方法如下：　　1、右键点击开始菜单，选择“程序和功能”。　　2、打开后点击“启用或关闭Windows功能”。　　3、在Windows功能列表中，取消勾选II

小红书笔记怎么删除 Mar 21, 2024 pm 08:12 PM

小红书笔记怎么删除?在小红书APP中是可以编辑笔记的，多数的用户不知道小红书笔记如何的删除，接下来就是小编为用户带来的小红书笔记删除方法图文教程，感兴趣的用户快来一起看看吧！小红书使用教程小红书笔记怎么删除1、首先打开小红书APP进入到主页面，选择右下角【我】进入到专区;2、之后在我的专区，点击下图所示的笔记页面，选择要删除的笔记;3、进入到笔记页面，右上角【三个点】;4、最后下方会展开功能栏，点击【删除】即可完成。

微信拉黑再删除永久加不上是真的吗 Apr 08, 2024 am 11:41 AM

1、首先，拉黑再删除永久加不上是假的，拉黑删除后想要再加对方，只要对方同意即可。2、如果用户将某人拉黑，对方将无法向用户发送消息、查看用户的朋友圈以及与用户进行通话。3、拉黑并不意味着将对方从用户的微信联系人列表中删除。4、如果用户在拉黑后又将对方从用户的微信联系人列表中删除，那么在删除后是没有办法恢复的。5、如果用户想再次添加对方为好友，需要对方同意并重新添加用户。

found.000是什么文件夹？found.000文件夹可以删除吗？ Mar 13, 2024 pm 08:52 PM

　　日常使用电脑的过程中，可能会收到found.000文件丢失损坏的错误提示，这个found.000是什么文件夹？如果没有用的话，可以将其删除吗？既然有这么多人不认识这个文件，下面小编就来跟大家仔细说说found.000文件夹吧~　　一、found.000是什么文件夹　　当电脑出现因非法关机导致的文件部分或全部丢失时，可以在位于系统分区中指定目录下找到名为“found.000”的特殊文件夹及其内部包含的以“.chk”为扩展名的文件。　　这个“fo

小红书发布怎么删除？发布删除怎么恢复？ Mar 21, 2024 pm 05:10 PM

小红书作为一家流行的社交电商平台，吸引了大量用户分享生活点滴和购物心得。有时候我们可能会不经意发布一些不合适的内容，这时候需要及时删除，这样可以更好地维护个人形象或者遵守平台规定。一、小红书发布怎么删除？1.登录小红书账号，进入个人主页。2.在个人主页下方，找到“我的创作”选项，点击进入。3.在“我的创作”页面，你可以看到所有发布的内容，包括笔记、视频等。4.找到需要删除的内容，点击右侧的“...”按钮。5.在弹出的菜单中，选择“删除”选项。6.确认删除后，该条内容将从你的个人主页和公共页面消失

小红书把别人评论删了怎么找回？把别人评论删了会有显示吗？ Mar 21, 2024 pm 10:46 PM

小红书作为一款热门的社交电商平台，用户之间的互动评论是平台中不可或缺的交流方式。有时候，我们可能会发现自己的评论被其他人删除，这种情况可能会让我们感到困惑。一、小红书把别人评论删了怎么找回？当发现自己的评论被删除时，首先可以尝试在平台上直接搜索相关的帖子或商品，查看是否还能找到该评论。如果评论被删除后仍然显示，那么可能是被原帖主删除的，这时候可以尝试联系原帖主，询问其删除评论的原因，并请求恢复评论。如果评论已经被完全删除且无法在原帖上找到，那么在平台上恢复评论的机会相对较小。可以尝试使用其他途径

抖音聊天记录怎么彻底消除干净 May 07, 2024 am 11:14 AM

1、打开抖音app，点击界面底部的【消息】，点击需要删除的聊天对话入口。2、长按任意一条聊天记录，点击【多选】，勾选想要删除的聊天记录。3、点击右下角的【删除】按钮，在弹出的窗口中选择【确认删除】即可将这些记录永久删除。

微信文件传输助手怎么彻底删除_微信文件传输助手关闭方法介绍 Mar 20, 2024 pm 08:31 PM

微信的文件传输助手是每个用户都有的，一些用户将它当做成了备忘录，会记录一些东西。那么微信文件传输助手怎么彻底删除呢？下面就让小编为大家详细介绍一下吧。微信文件传输助手怎么彻底删除答案：【微信】-【长按文件传输助手】-【删除该聊天】。具体步骤：1、首先打开微信软件，进入到首页中后我们找到【文件传输助手】长按；2、然后会弹出标为未读、置顶该聊天、不显示该聊天、删除该聊天，在这里我们点击【删除该聊天】即可；

See all articles

原生JS和JQuery动态添加、删除表格行的方法_javascript技巧

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题