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=\'#\' οnclick=\'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=\'#\' οnclick=\'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>
转载于:https://www.cnblogs.com/snowhite/p/9676030.html
jQuery实现表格行的动态增加与删除(改进版)相关推荐
- 用js实现表格行的动态添加与删除
对应的html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- jQuery实现表格行上移下移和置顶
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- 利用jQuery实现表单里的增加、删除和修改
这周老师教了怎么利用jQuery实现在表单里增加.删除和修改数据.可以增加数据,单选删除.多选删除和全选删除.ISBN的值式唯一的,不能重复,当输入的ISBN已存在,就只修改后面书名.效果图如下: 整 ...
- VB6实现动态增加和删除控件数组中的控件2021-06-02
VB6实现动态增加和删除控件数组中的控件 2021-6-3修改一个BUG 控件的添加: 1From1名称改为FrmWork 2.添加Picture控件名称改为PicCharacterContainer ...
- js动态增加,删除td,tr,table,div
js实现的动态添加,删除table内容: 截图如下: 1. 2. 源代码: main.css body {background-image: url(../images/qiantai/bg.png) ...
- java 动态添加定时器_quartz实现任务动态增加和删除
场景 这几天做项目的时候遇到了个状态自动切换的场景.该场景具体情况如下: 用户可以创建多个活动 活动有开始时间和结束时间 活动有个状态:未上线.未开始(上线但未到开始时间).进行中(上线且处于开始时间 ...
- solr-cloud 集群动态增加、删除节点
本次讲述动态增加节点基于上一章集群搭建的基础上来讲:https://blog.csdn.net/u013490585/article/details/86494476 上一章的例子中用了3台zk,4台 ...
- jquery隐藏表格行
为什么80%的码农都做不了架构师?>>> 1.<input type="checkbox"> <script>$(function ...
- ExtJS 动态增加与删除items,动态设置textField可见与否
现在要使用的是在center-panel中将gridpanel去掉,换成一个treepanel 于是乎,就写了如下代码: 显示代码打印1 var items=Ext.getCmp('center-pa ...
- 动态增删表格行(纯JS写法)
动态增删表格行(纯JS写法) 归档 进行表格下行的动态增加与删除 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional// ...
最新文章
- PowerShell批量设置PATH环境变量
- apollo集群部署_ribbon+apollo实现灰度发布
- 大数据架构:flume-ng+Kafka+Storm+HDFS 实时系统组合
- c语言线性顺序表,C语言程序——线性顺序表.doc
- Python稳基修炼的经典案例9(计算机二级、初学者必会turtle库例题)
- unity 打开项目路径无效_unity3d建立的文件有中文路径,现在新建了项目打不开了...
- java 重写equals的要点_浅谈java 重写equals方法的种种坑
- 【转】Gnuplot基本介绍
- vos3000怎样使用 IVR 语音流程跟踪分析
- 使用js调用dsoframer打开本地文档问题
- [迁移] Luac的使用
- 薅羊毛!如何让趣头条自动阅读挣钱
- U盘提示''这张磁盘有写保护''修复工具
- 基于流计算 Oceanus 和 Elasticsearch Service 构建百亿级实时监控系统
- vi使用手册(zt)
- spring源码解析--环境搭建
- matplotlib的imshow在Python shell IDLE环境无法显示图像问题
- 知云文献翻译打不开_科研星火 | 基础技能——翻译篇
- Python namedtuple ——具名元组
- python爬取电影天堂