(1)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/1999/xhtml">
<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>
$(document).ready(function(){
$("#but").click(function(){
var $table=$("#tab tr");
var len=$table.length;
// alert("tr length :"+len);
// alert(" content :"+"<tr id="+(len+1)+"><td align=\'center\'>"+len+"</td><td align=\'center\'>jQuery"+len+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(len+1)+")\'>删除</a></td></tr>");
$("#tab").append("<tr id="+(len+1)+"><td align=\'center\'>"+len+"</td><td align=\'center\'>jQuery"+len+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(len+1)+")\'>删除</a></td></tr>");
})
})
function deltr(index)
{
alert(index);
// alert("tr[id=\'"+index+"\']");
$table=$("#tab tr");
if(index>$table.length)
return;
else
{
$("tr[id=\'"+index+"\']").remove();
//$("tr:gt('"+index+"')").each
// for(var temp=index+1;temp<=$table.length;temp++)
// {
//$("#tab").append("<tr id="+(temp-1)+"><td align=\'center\'>"+(temp-2)+"</td><td //align=\'center\'>jQuery"+(temp-2)+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(temp-1)+")\'>删除//</a></td></tr>");
// $("tr[id=\'"+temp+"\']").replaceWith("<tr id="+(temp-1)+"><td align=\'center\'>"+(temp-2)+"</td><td //align=\'center\'>jQuery"+(temp-2)+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(temp-1)+")\'>删除//</a></td></tr>");
// }
}
}
</script>
</head>
<body>
<br/>
<table id="tab" border="1" width="60%" align="center">
<tr>
<td width="20%" align="center">序号</td>
<td align="center">标题</td>
<td align="center">操作</td>
</tr>
</table>
<br/>
<div style="border:2px; border-color:#00CC00; margin-left:20%">
<input type="button" id="but" value="add"/>
</div>
</body>
</html>
(2)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/1999/xhtml">
<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>
//在id为test的table的最后增加一行
function addtr(id){
tr_id = $("#"+id+">tbody>tr:last").attr("id");
alert(tr_id);
tr_id++;
//alert(tr_id);
str = "<tr id = '"+tr_id+"'><td width='30%'>re1</td><td width='30%'>re2</td><td width='30%'>re3</td></tr>";
$('#'+id).append(str);
}
//删除id为test的table的最后一行
function deltr(id){
tr_id = $("#"+id+">tbody>tr:last").attr("id");
$('#'+tr_id).remove();
}
</script>
</head>
<body>
<br/>
<table border="1px #ooo" id="test" name="test" class="test" cellpadding="0" cellspacing="0" width="20%">
<tr id="1"><td width="30%">1</td><td width="30%">2</td><td width="30%">3</td></tr>
<tr id="2"><td width="30%">11</td><td width="30%">22</td><td width="30%">33</td></tr>
</table>
<input type="button" name="button" value="add" onclick="addtr('test');">
<input type="button" name="button" value="del" onclick="deltr('test');">
</div>
</body>
</html>
(3)javascript动态追加删除
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!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=GB18030">
<title>Insert title here</title>
<script type="text/javascript">
function addMore()
{
var td = document.getElementById("more");
var br = document.createElement("br");
var input = document.createElement("input");
var button = document.createElement("input");
input.type = "file";
input.name = "file";
button.type = "button";
button.value = "Remove";
button.onclick = function()
{
td.removeChild(br);
td.removeChild(input);
td.removeChild(button);
}
td.appendChild(br);
td.appendChild(input);
td.appendChild(button);
}
</script>
</head>
<body>
<form action="upload" theme="simple" enctype="multipart/form-data">
<table align="center" width="50%" border="1">
<tr>
<td>
file
</td>
<td id="more">
<input type = "file" name="file"/><input type="button" value="Add More.." onclick="addMore()">
</td>
</tr>
</table>
</form>
</body>
</html>
(4)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/1999/xhtml">
<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>
分享到：
。非常感谢！！
很不错，看了下、。。。
相关推荐
jquery添加删除行
Jquery动态添加和删除行，配合ajax的使用 可以更完美的实现无刷新更新
NULL 博文链接：https://fackyou200.iteye.com/blog/799201
jquery动态添加删除行 点击按钮动态添加行或动态删除行代码 删除后序号重新排列
jquery表格添加删除行点击按钮动态添加删除行
jQuery添加删除标签代码是一款点击按钮将选中标签添加到面板上；再次选中标签，点击按钮可删除面板中的标签。
两种jquery动态添加删除行方法 两种jquery动态添加删除行方法 两种jquery动态添加删除行方法
jquery表格动态添加删除行代码是一款基于jquery实现的表格里面点击按钮后可进行自动添加删除行功能代码。
JQuery对表格行的添加删除,如添加一行，删除一行
jQuery动态添加删除编辑标签代码是一款自定义选项卡，添加选项卡，删除选项卡，编辑选项卡内容等。 jQuery动态添加删除编辑标签代码截图
jquery 添加删除 DIV 和 jquery 切换特效 jquery 添加删除 DIV 和 jquery 切换特效
74、jquery表格动态添加删除行代码
jQuery添加删除标签代码基于jquery.1.10.2.min.js制作，有添加标签、初始化已设标签、修改标签、删除标签、禁用标签操作、方法启用禁用标签操作等功能。
jQuery添加删除标签插件是一款基于jquery开发的标签功能加强插件，可以生成或删除标签，还能对输入重复标签进行检查。
jQuery 动态添加或删除表格行特效，每点击一次添加，会添加一个表格单元格，点击删除会删掉所有行，基于jQuery插件完成，想研究的朋友下载一看。
这是一款实用的jQuery动态添加移动列表插件，jQuery动态添加数据代码，jQuery动态数据代码。
jQuery表格编辑添加删除行插件是一款表格插件，默认设置json数据动态生成表格。
用Jquery 添加删除行, 并进行计算 品名 数量 单价 金额(计算得出) 添加(按钮) 品名 数量 单价 金额(计算得出) 删除(按钮) .... --- 总计: