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


Posted in Javascript onOctober 12, 2016

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

今天在项目中,刚好用到给指定的table添加一行、删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自己动手封装个,现就把代码分享出来,避免大伙重复造轮子,如有问题欢迎大伙拍砖指正,千万可别人身攻击,嘎嘎。。。

需求场景

1)、添加一行

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

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

2)、删除一行

支持动态删除一行。

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

1、原始界面如下:

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

2、添加一行,如要添加一行需点击“添加”按钮,现点击两下会自动添加两行,效果如下截图:

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

3、删除一行,如要删除指定行,先要选中行然后在点击“删除”按钮进行删除(这不是废话嘛~~~),现选中一行,效果如下截图:

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

4、对选中行进行删除,现点击“删除”按钮就会把选中的行删除掉,效果如下截图:

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

代码如下:

<%@ 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>

以上就是小编为大家带来的利用jquery给指定的table动态添加一行、删除一行的方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
javascript动态加载二
Aug 22 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 #Javascript
详解Javascript中的原型OOP
Oct 12 #Javascript
浅析BootStrap Treeview的简单使用
Oct 12 #Javascript
jquery自定义表单验证插件
Oct 12 #Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 #Javascript
老生常谈javascript的类型转换
Oct 12 #Javascript
vue制作加载更多功能的正确打开方式
Oct 12 #Javascript
You might like
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
php编写简单的文章发布程序
2015/06/18 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
Flask框架各种常见装饰器示例
2018/07/17 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
中专生毕业个人鉴定
2014/02/26 职场文书
幼儿园老师寄语
2014/04/03 职场文书
活动总结报告格式
2014/05/09 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
期末个人总结范文
2015/02/13 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
主持稿开场白
2015/06/01 职场文书
python析构函数用法及注意事项
2021/06/22 Python
配置nginx负载均衡
2022/05/06 Servers