JQuery添加删除行

最新推荐文章于 2024-08-08 10:33:11 发布

Melody_^_^

最新推荐文章于 2024-08-08 10:33:11 发布

阅读量1.9k

点赞数

分类专栏： JQuery 文章标签： jquery function table button input html

JQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

摘自：http://kingjn.iteye.com/blog/695343

(1)jQuery追加动态删除
按行实现添加，删除，并在删除后，动态从后补充上来。

Html代码

<!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末尾追加删除

Html代码

<!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动态追加删除

Html代码

<%@ 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三种动态添加删除方式

Html代码

<!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><buttonclassbuttonclass="del">删除</button></td>
</tr>
<tr>
<td>这行原来就有</td>
<td><buttonclassbuttonclass="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>

Melody_^_^

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery添加删除行

摘自：http://kingjn.iteye.com/blog/695343(1)jQuery追加动态删除按行实现添加，删除，并在删除后，动态从后补充上来。 Html代码 > html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content
复制链接

扫一扫

专栏目录