具体实现代码如下：

table的HTML如下：

代码如下 复制代码
<input type="button" value="添加一行" />
<table>
<tr><td><input type="button" class = "del" value="删除该行"/></td></tr>
</table>

添加行的jQuery代码如下：

代码如下 复制代码
$(function(){
$("tr").last().after("<tr><td><input type=‘button’ class = ‘del’ value=‘删除该行’/></td></tr>");
})

删除代码如下：

$(this).parents("tr").remove();

上面代码感觉不合理也有不兼容我们可以稍加修改

增加的代码如下

代码如下 复制代码
function AddRow(){
var vTb=$("#TbData");//得到表格ID=TbData的jquery对象
//所有的数据行有一个.CaseRow的Class,得到数据行的大小
var vNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少个数据行
var vTr=$("#TbData #trDataRow1"); //得到表格中的第一行数据
var vTrClone=vTr.clone(true);//创建第一行的副本对象vTrClone
vTrClone[0].id="trDataRow"+vNum;//设置 第一个Id?榈鼻盎袢∷饕?环乐怪匮}添加多个ID??rDataRow1的数据行；一次添加一个；
vTrClone.appendTo(vTb);//把副本单元格对象添加到表格下方
}

删除的代码如下

代码如下 复制代码
var vNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少个数据行;
if(vNum<=2)
{
alert('请至少留一行');
return;
}
var vbtnDel=$(this);//得到点击的按钮对象
var vTr=vbtnDel.parent("td").parent("tr");//得到父tr对象;
if(vTr.attr("id")=="trDataRow1")
{
alert('第一行不能删除!'); //第一行是克隆的基础，不能删除
return;
}else{
vTr.remove();
}

下面我们写一个完整的按行实现添加，删除，并在删除后，动态实现下在参考

代码如下 复制代码
<!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/1999/xh(www.111cn.net)tml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<title>demo about table</title>
<script>
jQuery(function($){
//添加行
$("#add1").click(function(){
$("#table2>tbody").append('<tr><td>新增1</td><td><button onclick="deltr(this)">删除</button></td></tr>')
});
});
//删除行的函数，必须要放domready函数外面
function deltr(delbtn){
$(delbtn).parents("tr").remove();
};
jQuery(function($){
//定义删除按钮事件绑定
//写里边，防止污染全局命名空间
function deltr(){
$(this).parents("tr").remove();
};
//已有删除按钮初始化绑定删除事件
$("#table2 .del").click(deltr);
//添加行
$("#add2").click(function(){
$('<tr><td>新增行2</td><td><button class="del">删除</button></td></tr>')
//在这里给删除按钮再次绑定事件。
.find(".del").click(deltr).end()
.appendTo($("#table2>tbody"));
});
});

jQuery(function($){
//第四个表格的删除按钮事件绑定
$("#table2").click(function(e) {
if (e.target.className=="del"){
$(e.target).parents("tr").remove();
};
});
//第四个表格的添加按钮事件绑定
$("#add3").click(function(){
$("#table2>tbody").append('<tr><td>新增行3</td><td><button class="del">删除</button></td></tr>')
});
});

</script>
</head>

<body>
<br/>
<table id="table2">
<tbody>
<tr>
<td>这行原来就有</td>
<td><buttonclass="del">删除</button></td>
</tr>
<tr>
<td>这行原来就有</td>
<td><buttonclass="del">删除</button></td>
</tr>
</tbody>
</table>
<input type="button" name="add1" id="add1" value="新增1"/>
<input type="button" name="add2" id="add2" value="新增2"/>
<input type="button" name="add3" id="add3" value="新增3"/>
</body>
</html>

from:http://www.111cn.net/wy/jquery/46175.htm

jQuery动态添加删除与添加表行代码的更多相关文章

  1. JS-DOM 综合练习-动态添加删除班级成绩表

    费了2个小时,才把原理弄懂,把问题逐个解决,当你发现你最后栽的那个点,是一个小石头拌的你,你起来是该哭还是该笑呢?只怪自己习武不精吧. 虽然问题都解决了,但是还有一个余留的问题就是鼠标经过input时 ...

  2. Jquery动态在td中添加checkbox

    如图:想要在这个id为headId的<td>中,用jquery动态添加checkbox 代码如下 : data是我用ajax 从后台获取的数据,里面含有若干个user类,我想把所有的人名字 ...

  3. demo Django-基础书籍添加删除（单表）

    小demo使用---- 1.pycharm-2019.2 2.python-3.7.2 3.mysql-5.7.25 4.django-2.2.4 使用过程中的一些注意事项和出现的常见错误的解决地址 ...

  4. C#通过Ado.net对连接数据库并进行添加删除等常规操作的代码

    如下资料是关于C#通过Ado.net对连接数据库并进行添加删除等常规操作的内容. static string sqlcon = "server=.;database=;Integrated ...

  5. 用JQuery动态为选中元素添加/删除类

    在做一些tab页功能时,我们经常会见到如下样式: 即当选中一个元素时,在此元素下会添加相应的类,以示区别.今天就研究了一下如何用JQuery实现此效果. 1. HTML代码 <a id=&quo ...

  6. jquery动态生成的元素添加事件的方法

    动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() { alert(this.v ...

  7. JQuery动态增加删除元素

    <form action="" method="post" enctype="multipart/form-data"> < ...

  8. jquery动态加入删除一行数据

    <html> <head> <title>加入.删除一行</title> <meta http-equiv="content-type& ...

  9. redis cluster 添加/删除节点操作

    RedisCluster 添加/删除节点 添加节点新配置两个测试节点8008和9009 [root@--- ~]# /usr/local/redis-/bin/redis-server /u02/re ...

随机推荐

  1. IIS 之 通过 Web.config 修改文件上传大小限制设置方法

    在IIS 6.0中,不设置默认大小为4M,设置文件上传大小的方法,maxRequestLength(KB),executionTimeout(毫秒),配置如下节点: <system.web> ...

  2. Python join方法

    用相应格式的字符串将序列链接起来. a = ['wo','hao','shuai'] print("".join(a)) 'wohaoshuai' print("-&qu ...

  3. HTML页面滚动时获取离页面顶部的距离2种实现方法

    获取离滚动页面的顶部距离有两种方法一是DOM:而是jquery,具体的实现如下,感兴趣的朋友可以尝试操作下     方法一:DOM 复制代码 代码如下: <script> window.o ...

  4. BZOJ4990 [Usaco2017 Feb]Why Did the Cow Cross the Road II 动态规划 树状数组

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ4990 题意概括 有上下两行长度为 n 的数字序列 A 和序列 B,都是 1 到 n 的排列,若 a ...

  5. moodle3.15+,mysql完全的Unicode支持配置

    https://docs.moodle.org/dev/Releases,moodle个版本升级的主要内容和改动 在windows是mysql.ini  linux 下是mysql.cnf 因为MyS ...

  6. 《Gradle权威指南》--Groovy基础

    No1: Groovy中分号不是必须的 No2: Groovy中,单引号和双引号都可以定义一个字符串常量,不同的是单引号标记的是纯粹的字符串常量,而不是对字符串里的表达式做运算,但是双引号可以. ta ...

  7. P2648 赚钱

    P2648 赚钱对于不知道起点在哪里的最短路,先建立一个超级源点,然后从超级源点跑最长路,并判正环即可. #include<iostream> #include<cstdio> ...

  8. 003.HAProxy ACL规则的智能负载均衡

    一 简介 HAProxy可以工作在第七层模型,可通过ACL规则实现基于HAProxy的智能负载均衡系统,HAProxy通过ACL规则完成以下两种主要功能: 通过ACL规则检查客户端请求是否合法,如果符 ...

  9. Golang vs PHP 之文件服务器

    前面的话 作者为golang脑残粉,本篇内容可能会引起phper不适,请慎读! 前两天有同事遇到一个问题,需要一个能支持上传.下载功能的HTTP服务器做一个数据中心.我刚好弄过,于是答应帮他搭一个. ...

  10. vue 如何拿到后台传回的富文本中的img，进行9宫格排列展示以及相关处理

    描述: res.data.list 返回的数组, 数组中的每个对象有一个 content,就是传回来的富文本的内容,要拿到这里面的所有的img,进行9宫格排列处理: 1.let img = this. ...