使用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 相关文章推荐
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 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笔试题
2009/08/04 PHP
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
python实现求最长回文子串长度
2018/01/22 Python
python实现Decorator模式实例代码
2018/02/09 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
办理护照介绍信
2014/01/16 职场文书
初中英语课后反思
2014/04/25 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
《绝招》教学反思
2016/02/20 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
vue选项卡切换的实现案例
2022/04/11 Vue.js