具体实现代码如下：

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. [NOI2012]骑行川藏（未完成）

    题解: 满分又是拉格朗日啥的 以后再学 自己对于n=2猜了个三分 然后对拍了一下发现是对的

  2. HDU3031 To Be Or Not To Be 左偏树 可并堆

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - HDU3031 题意概括 喜羊羊和灰太狼要比赛. 有R次比赛. 对于每次比赛,首先输入n,m,n表示喜羊羊和灰 ...

  3. 利用python将表格中的汉字转化为拼音

    缺少包时用pip install 进行安装,例如: pip install xlsxwriter   完成代码如下: #!/usr/bin/python #-*-coding:utf-8-*- #fr ...

  4. 6-7 树的层次遍历 uva122

    非常不熟练  照着书大的 晚上尝试一下自己打  了解二叉树  用数组打 第一次: #include<bits/stdc++.h> using namespace std; bool fai ...

  5. 053 关于hive的存储格式

    1.存储格式 textfile rcfile orc parquet 2.存储方式 按行存储 ->textfile 按列存储 ->parquet 3.压缩比 4.存储textfile的原文 ...

  6. MySQL数据库crash的问题分析

    [问题] 生产环境有多台slave服务器,不定期的会crash,下面是error log中的堆栈信息 Thread pointer: 0x7f1e54b26410 Attempting backtra ...

  7. go标准库-log包源码学习

    log包是go语言提供的一个简单的日志记录功能,其中定义了一个结构体类型 Logger,是整个包的基础部分,包中的其他方法都是围绕这整个结构体创建的． Logger结构 Logger结构的定义如下: ...

  8. internet连接共享

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_shai nternet连接共享 允许其他网络用户通过此计算机的internet连接来连接

  9. oracle data integrator与大数据平台的集成

    在最新版本的ODI中,通过使用各种知识模块,可在统一的界面上实现对传统数据库.hive, pig, spark, hdfs等的ETL操作,满足在同一系统或采用相同的方式实现ETL功能. 详细的内容可参 ...

  10. LeetCode全文解锁 √

    分享一波大牛整理leetcode,方便整理思路 可以点击下载