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

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

时间: 2015-05-27

JQuery动态添加和删除表格行的方法

本文实例讲述了JQuery动态添加和删除表格行的方法.分享给大家供大家参考.具体分析如下: 昨天做页面表格行动态添加和删除,看了无数的介绍,发现了一个好东东,JQuery.用它实现起来还真的是很方便,这个是我用到我们平台的一个方法. 复制代码 代码如下: //记录添加行数 var areaCount=1; //记录实际表格行数 var rowCount=1; //删除模板html var delRowTemplete = "<td><a href='javascript:voi

JQuery Ajax动态生成Table表格

前言: 本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里. 目标: a 熟悉简单JQuery Ajax的使用 b 了解如何构造基本的Json格式的数据(构建Json也可以通过第三方的dll) c 熟悉下handler的基本用法 1 简单效果图 2 前台代码 <%@ Page Language="C#" AutoEventWireup=&q

JQuery实现表格动态增加行并对新行添加事件

实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并绑定timepicker 三:表2自动增加行,新行绑定timepicker HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-

jQuery实现的简单动态添加、删除表格功能示例

本文实例讲述了jQuery实现的简单动态添加.删除表格功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 我们</title> <style> * { padding: 0; margin: 0;

jQuery实现html表格动态添加新行的方法

本文实例讲述了jQuery实现html表格动态添加新行的方法.分享给大家供大家参考.具体实现方法如下: <!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"> <hea

基于jquery的动态创建表格的插件

废话少说直接进入主题, 表格功能: 1.添加 2.删除 3.获取值 4.动态填充数据 5.动态设置焦点 6.键盘左右上下键控制单元格焦点 7.单元格添加正则验证功能 WebForm4.aspx 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="table.WebForm4" %&

Jquery 动态循环输出表格具体方法

实现功能:1.有一个同学叫我实现一个这样的功能就像PHP,在表单中输入数字,然后网页就出现相应的数量:如果是PHP的话就简单多了,Jquery实现还是第一个,就开始狂的实验,最后还是实现了(知识点:Jquery创建节点.获取表单的值.循环语句)Jquery代码: 复制代码 代码如下: <script type="text/javascript" language="javascript">$(function(){$("#btn").

jquery动态增加删除表格行的小例子

复制代码 代码如下: <script src="jquery/jquery-1.3.1.js"></script><style type="text/css">body{background:#FFFFFF;}</style></head><body><script> $(function(){ var show_count = 20;   //要显示的条数 var count =

jQuery实现表格行和列的动态添加与删除方法【测试可用】

本文实例讲述了jQuery实现表格行和列的动态添加与删除方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

基于jQuery的动态表格插件

在这里我们需要控制用户的输入验证,表格的添加删除,用户输入数据的统计聚合,还有相应的计算列比如商品的总价=商品的单价*商品数量,再如,同时在用户提交的时候我还要需要获取提交到后台服务端处理在存储到我们的数据库.本插件则简单的处理了这些繁琐的事情. 插件属性说明: 1:rowTemplate:这是插入列的模板,在模板中我们的序号这种行号标示的需要rownum 的class.在模板中的需要唯一编号的比如我们的radiobutton的name属性在每个td单元格需要唯一的name组,再如id这种需要唯

Jquery 动态生成表格示例代码

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

jQuery动态生成表格及右键菜单功能示例

本文实例讲述了jQuery动态生成表格及右键菜单功能.分享给大家供大家参考,具体如下: 这里用的是 jquery 1.4.1 的库文件,具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

jQuery 动态粒子效果示例代码

1.js部分 var RENDERER = { PARTICLE_COUNT : 1000, PARTICLE_RADIUS : 1, MAX_ROTATION_ANGLE : Math.PI / 60, TRANSLATION_COUNT : 500, init : function(strategy){ this.setParameters(strategy); this.createParticles(); this.setupFigure(); this.reconstructMetho

JQuery 动态生成Table表格实例代码

JQuery动态生成Table表格 主要用到了JQuery中的append和appendto的方法,具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type&quo

jQuery实现动态生成表格并为行绑定单击变色动作的方法

本文实例讲述了jQuery实现动态生成表格并为行绑定单击变色动作的方法.分享给大家供大家参考,具体如下: <html> <head> <meta charset="utf-8"> <title>jquery表格单击变色</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

jQuery动态生成不规则表格(前后端)

一.需求:有这么一张表 前四个属性当作联合主键 需要把该表所有的行在前端以表格形式显示出来,要求activityId相同时合并成一行,activityCode相同时,合并一行,activityVersion相同时也合并一行.类似这种: 二.初解决:先上来把数据库的数据查询出来,以List<Activity> activities保存,再存到json对象中传回页面.像这样json.put("activities",activities); 到js页面了,然后就开始蒙蔽了.本来

JS实现动态生成表格并提交表格数据向后端

本文实例介绍了JS实现动态生成表格并向后端提交表格数据的相关代码,分享给大家供大家参考,具体内容如下 先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件. <script src="../js/jqui/jquery/jquery-1.5.2.min.js" type="text/javascript"></

如何使用Jquery动态生成二级选项列表

这篇文章主要介绍了如何使用Jquery动态生成二级选项列表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 想写一个多级联动的选项列表,并且我想要动态生成,但是我看了好多博客看得我晕乎乎的,就自己查了一些jq 的方法自己尝试些了一下,下面放上我实现的效果和源代码 实现效果: 源代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

jQuery动态生成的元素绑定事件操作实例分析

本文实例讲述了jQuery动态生成的元素绑定事件操作.分享给大家供大家参考,具体如下: 这段时间在写代码的时候遇到一个问题,通过append()添加的节点,点击事件不起作用.当时我百思不得其解,各种找错都没找到错误的原因.后来才发现是动态生成节点的问题,还是自己没有经验啊. 下面来总结一下这个问题的始末,温故而知新. 先看下click绑定事件的效果. <div> <p>a</p> <p>b</p> <p>c</p> <

vue+element创建动态的form表单.以及动态生成表格的行和列

动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v-if来渲染对应的表单,数据,事件什么的都可以动态的传进去,比较好用 复制代码  1 <el-form size="mini" class="lj-form lj-form-s1">  2             <div v-for="(i