利用jquery给指定的table动态添加一行、删除一行
$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列
$("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列
今天在项目中,刚好用到给指定的table添加一行、删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自己动手封装个,现就把代码分享出来,避免大伙重复造轮子,如有问题欢迎大伙拍砖指正,千万可别人身攻击,嘎嘎。。。
需求场景
1)、添加一行
支持在任意行添加一行且可配置的,如可在第一行添加一行、第二行添加一行、倒数第一行添加一行、倒数第二行添加一行,随需求的变化都不会影响。
前提条件:行数需在表中存在否则添加不成功。
2)、删除一行
支持动态删除一行。
先演示结果,如中意了在好好研究代码。
1、原始界面如下:
2、添加一行,如要添加一行需点击“添加”按钮,现点击两下会自动添加两行,效果如下截图:
3、删除一行,如要删除指定行,先要选中行然后在点击“删除”按钮进行删除(这不是废话嘛~~~),现选中一行,效果如下截图:
4、对选中行进行删除,现点击“删除”按钮就会把选中的行删除掉,效果如下截图:
代码如下:
<%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>利用jquery给指定的table添加一行、删除一行</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript"src="<%=request.getContextPath()%>/js/jquery-1.5.1.js"></script><script type="text/javascript">添加一行、删除一行封装方法////*** 为table指定行添加一行** tab 表id* row 行数,如:0->第一行 1->第二行 -2->倒数第二行 -1->最后一行* trHtml 添加行的html代码**/function addTr(tab, row, trHtml){//获取table最后一行 $("#tab tr:last")//获取table第一行 $("#tab tr").eq(0)//获取table倒数第二行 $("#tab tr").eq(-2)var $tr=$("#"+tab+" tr").eq(row);if($tr.size()==0){alert("指定的table id或行数不存在!");return;}$tr.after(trHtml);}function delTr(ckb){//获取选中的复选框,然后循环遍历删除var ckbs=$("input[name="+ckb+"]:checked");if(ckbs.size()==0){alert("要删除指定行,需选中要删除的行!");return;}ckbs.each(function(){$(this).parent().parent().remove();});}/*** 全选* * allCkb 全选复选框的id* items 复选框的name*/function allCheck(allCkb, items){$("#"+allCkb).click(function(){$('[name='+items+']:checkbox').attr("checked", this.checked );});}添加一行、删除一行测试方法/// $(function(){//全选allCheck("allCkb", "ckb");});function addTr2(tab, row){var trHtml="<tr align='center'><td width='30%'><input type='checkbox' name='ckb'/></td><td width='30%'>地理</td><td width='30%'>60</td></tr>";addTr(tab, row, trHtml);}function delTr2(){delTr('ckb');}</script></head><body><table border="1px #ooo" id="tab" cellpadding="0"cellspacing="0" width="30%"><tr align="center"><td width="30%"><input id="allCkb" type="checkbox"/></td><td width="30%">科目</td><td width="30%">成绩</td></tr><tr align="center"><td width="30%"></td><td width="30%">语文</td><td width="30%">80</td> </tr></table><input type="button" οnclick="addTr2('tab', -1)" value="添加"><input type="button" οnclick="delTr2()" value="删除"></body> </html>
from: http://www.cnblogs.com/linjiqin/archive/2013/06/21/3148181.html
利用jquery给指定的table动态添加一行、删除一行相关推荐
- table动态添加、删除tr
在Web网页中动态为table添加或删除数据行是很常见的需求,实现这一效果有很多种方法,这里只介绍一种,不过在写这一解决方法的时候我感受到了熟练使用Jquery的重要性. Html代码: <st ...
- js实现简单的动态添加或删除一行数据
实现代码如下: <script type="text/javascript"> $(function(){ // 动态添加(此处未加样式图片路径等) //var li= ...
- JSP中动态添加或删除table的行
个 想要实现如上图动态添加或者删除一行的功能,代码如下:(包含点击"环节参与人员"空白栏时弹出组织结构人员树时的弹窗功能) HTML部分: <body ><di ...
- html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号 捆包号 品名 规格 材质 重量 业务需求是,从后台获取到订单 ...
- 利用jquery动态添加和删除表格的一行,并且保存单行数据
开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...
- 原生态JS和JQuery版的动态添加、删除表格行
过了太久,JQuery都生疏了,闲来没事,写着玩玩. 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). >原生态 ...
- php动态删除输入框,jQuery实现动态添加和删除input框实例代码
本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下 选项 $(function(){ // 添加选项 $("#opbtn").cli ...
- html页面forEach用法,jQuery教程之使用模板动态添加html元素,相当于jstl里的foreach...
本篇文章探讨了jQuery教程之使用模板动态添加html元素,相当于jstl里的foreach,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < 1.开发的时候有时候要循 ...
- 利用jQuery实现表单里的增加、删除和修改
这周老师教了怎么利用jQuery实现在表单里增加.删除和修改数据.可以增加数据,单选删除.多选删除和全选删除.ISBN的值式唯一的,不能重复,当输入的ISBN已存在,就只修改后面书名.效果图如下: 整 ...
最新文章
- C#中在窗体应用中使用StringBuilder拼接显示网页
- ELF文件装载链接过程及hook原理
- dedecms的自定义模块
- 编译protobuf-3.11.4 错误: aclocal-1.15: command not found的解决办法
- GDB调试core文件样例(如何定位Segment fault)
- 计算整数中各位数字之和
- .NET Core开发实战(第21课:中间件:掌控请求处理过程的关键)--学习笔记(下)...
- 物联网技术系列之3分钟了解无线MESH网络
- Hbase入门——安装
- RFID能否让实体零售业度过“寒冬”?
- Cloudflare通过UnstoppableDomains添加对“.crypto”域名的支持
- linux编译android源码,ubuntu16.04 Android源码下载编译
- html点击按钮切换图片代码_单次点击实现远程代码执行:内容管理框架Drupal恶意图片上传漏洞利用链分析...
- Kubernetes 小白学习笔记(33)--kubernetes云原生应用开发-总结
- cityengine修改规则贴图
- 持久层框架JPA与Mybatis该如何选型
- Mplayer 音量控制
- 安装Linux镜像文件,通过iso镜像文件硬盘安装Liunx (转载)
- Node.js学习笔记--进阶之路
- matlab的梯形公式推导公式,用MATLAB作数值积分例.计算1)矩形公式和梯形公式将(0,4)-Read.ppt...
热门文章
- vue实战第一课:天气查询
- [搜索]一种改进的召回率准确率公式计算方式
- Spring Cloud Alibaba - 25 Gateway-路由断言工厂Route Predicate Factories谓词工厂示例及源码解析
- Java-Java I/O流解读之基于字符的I / O和字符流
- matlab 添加环境变量,CentOS 添加环境变量的三种方法
- python append 浮点数 精度_Python打牢基础,从12个语法开始!
- java compare 返回值_关于Java你不知道的那些事之Java8新特性[Lambda表达式和函数式接口]...
- python朋友圈表白_情人节「告白生成器」来了!这个AI能让偶像对你说情话,过于真实!...
- python 环形链表
- python 零矩阵