jQuery实现表格行的动态增加与删除(改进版)
之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故特意改进了一下!
在项目中很多时候遇到这样的问题,需要动态的增加、删除表格的行,很多情况下我们都是在页面来设置一个隐藏域的值,然后在js方法里动态的++或--,在学习jQuery的过程中,我试着用简单的方法来模拟实现这一个过程
效果图如下:
删除之前
删除2行后:
改进后具体代码如下:
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的添加与删除 ,初始状态下只有一个输入框组,可以通过点击输入框组的右侧“+”(或自定义的文字)可以在原输入框组的下面 ...
随机推荐
- dbExpress操作中用TDBGrid显示数据
由于一些数据感知组件如TDBGrid等是需要用到数据缓存的,这和dbExpress组件的存取机制是矛盾的.所以当打开数据集时会出现如下内容的警告框:“Operation not allowed on ...
- fastjson与各类型的转换
参考:https://www.cnblogs.com/ceshi2016/p/7381478.html http://www.cnblogs.com/goody9807/p/4244862.html ...
- josn的格式化
public String formatJson(Object obj) { com.alibaba.fastjson.JSONObject json=(com.alibaba.fastjson.JS ...
- mysql必须知道的
https://blog.csdn.net/xlgen157387/article/details/73691848
- Overrid Equals Defined Operator
public class Common { public override int GetHashCode() { return base.GetHashCode(); } public overri ...
- Idea中JavaWeb项目部署
1. 添加应用服务器tomcat 2. 将tomcat配置添加到项目中 artifacts配置:添加deploy, 添加artifacts,选择Web Application: Exploded &g ...
- 【XSY1262】【GDSOI2015】循环排插 斯特林数
题目描述 有一个\(n\)个元素的随机置换\(P\),求\(P\)分解出的轮换个数的\(m\)次方的期望\(\times n!\) \(n\leq 100000,m\leq 30\) 题解 解法一 有 ...
- 【BZOJ3379】【USACO2004】交作业 区间DP
题目描述 数轴上有\(n\)个点,你要从位置\(0\)去位置\(B\),你每秒钟可以移动\(1\)单位.还有\(m\)个限制,每个限制\((x,y)\)表示你要在第\(t\)秒之后(可以是第\(t\) ...
- python构建bp神经网络_鸢尾花分类(一个隐藏层)__2.代码实现
IDE:jupyter 数据集请查看:鸢尾花数据集 测试效果预览 成功率96.7% 代码已上传到码云
- LOJ# 572. 「LibreOJ Round #11」Misaka Network 与求和(min25筛,杜教筛,莫比乌斯反演)
题意 求 \[ \sum_{i = 1}^{n} \sum_{i = 1}^{n} f(\gcd(i, j))^k \pmod {2^{32}} \] 其中 \(f(x)\) 为 \(x\) 的次大质 ...