jQuery实现表格行的动态增加与删除(改进版)
之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子，有些人评论说"如果表格中是input元素，那么删除后的东西都将自动替换，这样应该是有问题的，建议楼主改进！"，故特意改进了一下！
在项目中很多时候遇到这样的问题,需要动态的增加、删除表格的行，很多情况下我们都是在页面来设置一个隐藏域的值，然后在js方法里动态的++或--，在学习jQuery的过程中，我试着用简单的方法来模拟实现这一个过程
效果图如下：
删除之前
删除2行后：
改进后具体代码如下：
<!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实现表格行的动态增加与删除(改进版)的更多相关文章
- jQuery实现表格行的动态增加与删除
删除之前删除2行后: 1<script> 8 $(document).ready(function(){ 9 //<tr/>居中 10 $("#tab tr" ...
- jQuery实现表格行的动态增加与删除 序号 从 1开始排列
<table id="tab" border="1" width="60%" align="center" sty ...
- jquery实现表格行的动态增加和删除
$("#Addmaterial").click(function () {//Addmaterial是增加按钮的ID $("#tab tr").attr(&qu ...
- jquery动态增加或删除tr和td【实际项目】
难点: (1)动态增加.删除tr和td (2)每天tr和td都有下标,且下标要动态变化, (3)tr和td为什么下标不能随便写,原因是此处需要把所有tr中的数据以list的形式发送到后台对象中,所有每 ...
- jQuery实现表格行上移下移和置顶
jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...
- JQuery实现表格行的上移、下移、删除、增加
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%&g ...
- jquery更改表格行顺序实例
使用jquery写的更改表格行顺序的小功能 表格部分: 复制代码代码如下: <table class="table" id="test_table"> ...
- hdfs以及hbase动态增加和删除节点
一个知乎上的问题:Hbase的Region server和hadoop的datanode是否可以部署在一台服务器上?如果是的话,二者是否是一对一的关系?部署在同一台服务器上,可以减少数据跨网络传输的流 ...
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版
上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ,初始状态下只有一个输入框组,可以通过点击输入框组的右侧“+”(或自定义的文字)可以在原输入框组的下面 ...
随机推荐
- Linux中，去掉终端显示的当前目录的绝对路径
Linux中,去掉终端显示的当前目录的绝对路径 去~/.bashrc中,找到PS1变量的定义,如果没有,手动加上: 可以将显示输出到标题栏上: #export PS1="[e]2;u@H w ...
- nginx worker_processes 配置
搜索到原作者的话:As a general rule you need the only worker with large number ofworker_connections, say 10,0 ...
- linux 查看路由表
随便转载,保留出处:http://www.cnblogs.com/aaron-agu/ route –n
- Nginx 对上游使用SSL链接
L96 双向认证SSL指令示列 对下游使用证书指令 Syntax: ssl_certificate file; Default: — Context: http, server Syntax: ssl ...
- 【BZOJ1419】Red is good 期望DP
题目大意 桌面上有\(R\)张红牌和\(B\)张黑牌,随机打乱顺序后放在桌面上,开始一张一张地翻牌,翻到红牌得到\(1\)美元,黑牌则付出\(1\)美元.可以随时停止翻牌,在最优策略下平均能得到多少钱 ...
- Ionic3实现选项卡切换可以重新加载echarts
要求 选项卡每切换一次,就加载对应的一个echarts 图,要有一开始的动画效果效果如下: 注意点 1.echarts要想每次都能重新加载,需要移除"_echarts_instance_&q ...
- composer 重装常见错误
install composer error: ------------------------------------ The PHP exe file you specified did not ...
- Windows系统下在Git Bash中把文件内容复制到剪贴板的命令
众所周知,在OS系统中,复制文件内容到剪贴板(比如复制公钥到剪贴板)的命令是: pbcopy < ~/.ssh/id_rsa.pub 在Win7或者Win10下这条命令就没用了.可以这样: cl ...
- python学习日记（数据结构习题）
元素分类 有如下值li= [11,22,33,44,55,66,77,88,99,90],将所有大于 66 的值保存至字典的第一个key中,将小于 66 的值保存至第二个key的值中.即: {'k1' ...
- iptables(1)
iptables配置文件:/etc/sysconfig/iptables 确认开启路由转发功能方法1:/sbin/sysctl -w net.ipv4.ip_forward=1方法2:echo 1 & ...