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


Posted in Javascript onMay 28, 2015

本文实例讲述了原生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="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程序设计有所帮助。

Javascript 相关文章推荐
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
jQuery功能函数详解
Feb 01 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 Javascript
jQuery实现html表格动态添加新行的方法
May 28 #Javascript
jquery实现用户打分评分特效
May 28 #Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 #Javascript
javascript转换静态图片,增加粒子动画效果
May 28 #Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 #Javascript
javascript实现行拖动的方法
May 27 #Javascript
JavaScript操作Cookie方法实例分析
May 27 #Javascript
You might like
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
最简单的PHP程序--记数器
2006/10/09 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
Python实现Youku视频批量下载功能
2017/03/14 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
python实现文件的分割与合并
2019/08/29 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
公司担保书范文
2014/05/21 职场文书
单位活动策划方案
2014/08/17 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
如何Python使用re模块实现okenizer
2022/04/30 Python