使用jquery给指定的table动态添加一行、删除一行


Posted in Javascript onOctober 13, 2016

需求场景

1)、添加一行

支持在任意行添加一行且可配置的,如可在第一行添加一行、第二行添加一行、倒数第一行添加一行、倒数第二行添加一行,随需求的变化都不会影响。

前提条件:行数需在表中存在否则添加不成功。

2)、删除一行

支持动态删除一行。

先演示结果,如中意了在好好研究代码。

1、原始界面如下:
使用jquery给指定的table动态添加一行、删除一行
2、添加一行,如要添加一行需点击“添加”按钮,现点击两下会自动添加两行,效果如下截图:
使用jquery给指定的table动态添加一行、删除一行
3、删除一行,如要删除指定行,先要选中行然后在点击“删除”按钮进行删除(这不是废话嘛~~~),现选中一行,效果如下截图:
使用jquery给指定的table动态添加一行、删除一行
4、对选中行进行删除,现点击“删除”按钮就会把选中的行删除掉,效果如下截图:
使用jquery给指定的table动态添加一行、删除一行

核心代码:

$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列
$("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列

代码如下:

<%@ 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" onclick="addTr2('tab', -1)" value="添加">
 <input type="button" onclick="delTr2()" value="删除">
 
 </body>
</html>

如果上面的文章介绍的不够详细,可以参考下面的文章与演示

Javascript 相关文章推荐
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
jQuery实现验证码功能
Mar 17 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
js中apply与call简单用法详解
Nov 06 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 #Javascript
JS取模、取商及取整运算方法示例
Oct 13 #Javascript
JavaScript中常用的验证reg
Oct 13 #Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 #Javascript
浅谈jquery上下滑动的注意事项
Oct 13 #Javascript
js中class的点击事件没有效果的解决方法
Oct 13 #Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 #Javascript
You might like
用PHP实现多级树型菜单
2006/10/09 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
js word表格动态添加代码
2010/06/07 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
python中关于for循环的碎碎念
2017/06/30 Python
python实现公司年会抽奖程序
2019/01/22 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
Python如何读取、写入CSV数据
2020/07/28 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
香港零食网购:上仓胃子
2020/06/08 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
岗位竞聘书范文
2014/03/31 职场文书
小学生暑假家长评语
2014/04/17 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
写给医生的感谢信
2015/01/22 职场文书
二手房购房意向书
2015/05/09 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android