首页 > Web开发 > 详细

jQuery实现表格行的动态增加与删除(改进版)

时间：2018-09-19 19:47:30 阅读：168 评论：0 收藏：0 [点我收藏+]

标签：方法 1.0 col http query name UNC 项目 meta

之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子，有些人评论说"如果表格中是input元素，那么删除后的东西都将自动替换，这样应该是有问题的，建议楼主改进！"，故特意改进了一下！

在项目中很多时候遇到这样的问题,需要动态的增加、删除表格的行，很多情况下我们都是在页面来设置一个隐藏域的值，然后在js方法里动态的++或--，在学习jQuery的过程中，我试着用简单的方法来模拟实现这一个过程

效果图如下：

删除之前
技术分享图片
删除2行后：

改进后具体代码如下：

1

技术分享图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 技术分享图片

技术分享图片

<html xmlns="http://www.w3.org/1999/xhtml">
3 技术分享图片

技术分享图片

<head>
4

技术分享图片

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 技术分享图片

技术分享图片

<script type="text/javascript" src="jquery-1.3.1.js"></script>
6 技术分享图片

技术分享图片

<title></title>
7 技术分享图片

技术分享图片

<script>
8 技术分享图片

技术分享图片

$(document).ready(function(){
9 技术分享图片

技术分享图片

//<tr/>居中
10 技术分享图片

技术分享图片

$("#tab tr").attr("align","center");
11 技术分享图片

技术分享图片

12

技术分享图片

//增加<tr/>
13 技术分享图片

技术分享图片

$("#but").click(function(){
14 技术分享图片

技术分享图片

var _len = $("#tab tr").length;
15 技术分享图片

技术分享图片

$("#tab").append("<tr id="+_len+" align=‘center‘>"
16 技术分享图片

技术分享图片

+"<td>"+_len+"</td>"
17 技术分享图片

技术分享图片

+"<td>Dynamic TR"+_len+"</td>"
18 技术分享图片

技术分享图片

+"<td><input type=‘text‘ name=‘desc"+_len+"‘ id=‘desc"+_len+"‘ /></td>"
19 技术分享图片

技术分享图片

+"<td><a href=\‘#\‘ onclick=\‘deltr("+_len+")\‘>删除</a></td>"
20 技术分享图片

技术分享图片

+"</tr>");
21 技术分享图片

技术分享图片

})
22

技术分享图片

})
23

技术分享图片

24

技术分享图片

//删除<tr/>
25 技术分享图片

技术分享图片

var deltr =function(index)
26 技术分享图片

技术分享图片

{
27

技术分享图片

var _len = $("#tab tr").length;
28 技术分享图片

技术分享图片

$("tr[id=‘"+index+"‘]").remove();//删除当前行
29 技术分享图片

技术分享图片

for(var i=index+1,j=_len;i<j;i++)
30 技术分享图片

技术分享图片

{
31

技术分享图片

var nextTxtVal = $("#desc"+i).val();
32 技术分享图片

技术分享图片

$("tr[id=\‘"+i+"\‘]")
33 技术分享图片

技术分享图片

.replaceWith("<tr id="+(i-1)+" align=‘center‘>"
34 技术分享图片

技术分享图片

+"<td>"+(i-1)+"</td>"
35 技术分享图片

技术分享图片

+"<td>Dynamic TR"+(i-1)+"</td>"
36 技术分享图片

技术分享图片

+"<td><input type=‘text‘ name=‘desc"+(i-1)+"‘ value=‘"+nextTxtVal+"‘ id=‘desc"+(i-1)+"‘/></td>"
37 技术分享图片

技术分享图片

+"<td><a href=\‘#\‘ onclick=\‘deltr("+(i-1)+")\‘>删除</a></td>"
38 技术分享图片

技术分享图片

+"</tr>");
39 技术分享图片

技术分享图片

}
40

技术分享图片

41

技术分享图片

}
42

技术分享图片

</script>
43 技术分享图片

技术分享图片

</head>
44 技术分享图片

技术分享图片

<body>
45

技术分享图片

46

技术分享图片

<table id="tab" border="1" width="60%" align="center" style="margin-top:20px">
47 技术分享图片

技术分享图片

<tr>
48

技术分享图片

<td width="20%">序号</td>
49 技术分享图片

技术分享图片

<td>标题</td>
50 技术分享图片

技术分享图片

<td>描述</td>
51 技术分享图片

技术分享图片

<td>操作</td>
52 技术分享图片

技术分享图片

</tr>
53

技术分享图片

</table>
54 技术分享图片

技术分享图片

<div style="border:2px;
55 技术分享图片

技术分享图片

border-color:#00CC00;
56 技术分享图片

技术分享图片

margin-left:20%;
57 技术分享图片

技术分享图片

margin-top:20px">
58 技术分享图片

技术分享图片

<input type="button" id="but" value="增加"/>
59 技术分享图片

技术分享图片

</div>
60

技术分享图片

</body>
61 技术分享图片

技术分享图片

</html>

jQuery实现表格行的动态增加与删除(改进版)

标签：方法 1.0 col http query name UNC 项目 meta

原文地址：https://www.cnblogs.com/snowhite/p/9676030.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！