使用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 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 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下打开URL地址的几种方法小结
2010/05/16 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
Python常用模块介绍
2014/11/21 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
python学习教程之使用py2exe打包
2017/09/24 Python
python读取文件名称生成list的方法
2018/04/27 Python
详解Python中的type和object
2018/08/15 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
生日邀请函范文
2014/01/13 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
优秀教师工作感言
2014/02/16 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
世界文化遗产导游词
2015/02/13 职场文书
大学学生会辞职信
2015/05/13 职场文书
2016教师节问候语
2015/11/10 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android