原生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 给汉字排序实例代码
Jun 28 Javascript
js直接编辑当前cookie的脚本
Sep 14 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 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
php在window iis的莫名问题的测试方法
2013/05/14 PHP
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
常见python正则用法的简单实例
2016/06/21 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
python字符串反转的四种方法详解
2019/12/02 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
python无序链表删除重复项的方法
2020/01/17 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
python图片合成的示例
2020/11/09 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
学前班教师的自我鉴定
2013/12/05 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
师生聚会感言
2014/01/26 职场文书
软件售后服务承诺书
2014/05/21 职场文书
项目合作意向书模板
2014/07/29 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
单位婚育证明范本
2014/11/21 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
西岭雪山导游词
2015/02/06 职场文书
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
nginx安装以及配置的详细过程记录
2021/09/15 Servers
Python学习之包与模块详解
2022/03/19 Python