jquery 动态增加table行,动态删除table行
在html中我们大量的用到了局部刷新,局部刷新就是使用js来动态的修改html局部的数据。下面来介绍下使用jquery来动态的增加table的行,当然这种方式可以适用到任何的html组件中去。
- <table id="myTable" class="table">
- <thead>
- <tr>
- <th>督导小组</th>
- <th>组员</th>
- <th>组长</th>
- <th>操作</th>
- </tr>
- </thead>
- <tbody id="myTb">
- </tbody>
- </table>
现在我们来动态的增加table的行,js代码如下
- var trTemp = $("<tr id='tr"+groupId+"'></tr>");
- trTemp.append("<td>" + groupName + "</td>");
- trTemp.append("<td>"+ isNull(fullName) +"</td>");
- trTemp.append("<td>"+ isNull(groupLeader) +"</td>");
- trTemp.append("<td><button onclick='addGroupMember("+ groupId + ")'>添加组员</button><button onclick='addGroupLeader("+ groupId + ")'>添加组长</button><button style='background:red;' onclick='clearData("+groupId+")'>清除</button></td>");
- trTemp.appendTo("#myTb");
原理就是把动态生成的html代码添加到table中去
动态删除就是获取当前需要删除的table元素,将其删除,js代码如下
$('#tr' + id).remove();
这样就可以删除掉了
jquery 动态增加table行,动态删除table行的更多相关文章
- ASP.NET网页动态添加、更新或删除数据行
ASP.NET网页动态添加.更新或删除数据行 看过此篇<ASP.NET网页动态添加数据行> http://www.cnblogs.com/insus/p/3247935.html的网友,也 ...
- sed 删除最后几行 和删除指定行 awk使用
sed 删除最后几行 和删除指定行 转载原文链接:http://blog.51cto.com/lspgyy/1305489 sed 想删除文件中的指定行,是可以用行号指定也可以用RE来匹配的. 删 ...
- Hadoop概念学习系列之Hadoop集群动态增加新节点或删除已有某节点及复制策略导向 (四十三)
不多说,直接上干货! hadoop-2.6.0动态添加新节点 https://blog.csdn.net/baidu_25820069/article/details/52225216 Hadoop集 ...
- jquery Datatables 行数据删除、行上升、行下降功能演示
Datatables 是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 官方网站:http://www.datatables.net Datatables ...
- ZooKeeper动态增加Server(动态增加节点)的研究(待实践)
说明:是动态增加Server,不是动态增加连接到ZK Server的Client. 场景如下(转自外文): 1.在t=t_1->[peer-1(Leader),peer-2],peer-1是主节 ...
- UE如何去除重复行,删除重复行
1 如图所示,原理一个文本文档有两千多行,但是有大量的重复 2 使用UE的排序功能,有删除重复行的选项. 3 处理之后只剩下不到两百行了.
- drools动态增加、修改、删除规则
目录 1.背景 2.前置知识 1.如何动态构建出一个kmodule.xml文件 2.kmodule.xml应该被谁加载 3.我们drl规则内容如何加载 4.动态构建KieContainer 3.需求 ...
- Quartz动态添加,修改,删除任务(暂停,任务状态,恢复,最近触发时间)
首页 博客 学院 下载 图文课 论坛 APP 问答 商城 VIP会员 活动 招聘 ITeye GitChat 写博客 小程序 消息 登录注册 关闭 quartz_Cron表达式一分钟教程 09-05 ...
- ASP.NET动态增加HTML元素的方法实例小结
本文实例讲述了ASP.NET动态增加HTML元素的方法.分享给大家供大家参考,具体如下: 在使用asp.net进行web开发的时候页面中的<head></head>中的信息可以 ...
- jqgrid删除多行数据,删不全的解决方案
功能实现: 删除选中的多条数据 bug: 总是删不干净,比如选中5条执行删除操作,后台全删掉了,可是前台仍然有剩余的几条,再次刷新会不见 错误代码: var ids = $("#grid-t ...
随机推荐
- python第三方库-图像处理库pillow
python图像处理库pillow 安装 pip install pillow 使用 导入 from PIL import pillow 读取图像 picture = Image.open('test ...
- Android开发build出现java.lang.NumberFormatException: For input string: "tle 0x7f0800aa"错误的解决方案
查看异常栈没有发现项目代码的问题,因为问题是出现在layout文件中. 全局查找tle这个,发现在某个layout文件中title一词被变成ti tle了,结果Android就xjb报错了. 参考
- java中jar包的使用
1:在工程目录下新建一个文件lib 导入jar包在里面 2:在jar包上右键 ——>build path——>add to bulid path OK!
- Css常用的技巧
一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读. 具体内容请浏览:CSS常用缩写语法 二.明确定义单位,除非值为0. 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中 ...
- 使用@ResponseBody输出JSON
添加jackson依赖 添加@ResponseBody 测试: 原理: 当一个处理请求的方法标记为@ResponseBody时,就说明该方法需要输出其他视图(json.xml),SpringMVC通过 ...
- MySQL 中 EXISTS 的用法
在MySQL中 EXISTS 和 IN 的用法有什么关系和区别呢? 假定数据库中有两个表 分别为 表 a 和表 b create table a ( a_id int, a_name varchar( ...
- sed命令替换文件内容
reference: https://www.cnblogs.com/starof/p/4181985.html 抓取目录名并修改 ls | grep "XXX" > 1.t ...
- facenet pyhton3.5 训练 train_softmax.py 时报错AttributeError: 'dict' object has no attribute 'iteritems'
报错原因:在进行facenet进行train_softmax.py训练时,在一轮训练结束进行验证时,报错AttributeError: 'dict' object has no attribute ' ...
- (转) SpringBoot:使用spring-boot-devtools进行热部署以及不生效的问题解决
在idea上怎么才能使用Spring的热部署 这里仅用Maven做介绍 (1)在Maven中添加依赖 (2)在插件配置 但是,为什么配置了还是没有用呢 ?! 这是因为idea默认是没有自动编译的,我们 ...
- php禁止个别ip访问网站
PHP禁止个别IP访问自己的网站,可以看看下面的方法. function get_ip_data(){ $ip=file_get_contents("http://ip.taobao.com ...