使用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 相关文章推荐
mailto的使用技巧分享
Dec 21 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
OpenLayers3实现地图显示功能
Sep 25 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
PHP文件操作实现代码分享
2011/09/01 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
理解javascript正则表达式
2016/03/08 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
部署Python的框架下的web app的详细教程
2015/04/30 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
使用Python函数进行模块化的实现
2019/11/15 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
JAVA招聘远程笔试题
2015/07/23 面试题
法律工作求职自荐信
2013/10/31 职场文书
上班离岗检讨书
2014/01/27 职场文书
水电工岗位职责
2014/02/12 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
小学学校评估方案
2014/06/08 职场文书
学校交通安全责任书
2014/08/25 职场文书
布达拉宫导游词
2015/02/02 职场文书
新闻稿标题
2015/07/18 职场文书
竞选稿之小学班干部
2019/10/31 职场文书