利用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 相关文章推荐
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
jquery+json实现分页效果
Mar 07 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
JS如何生成动态列表
Sep 22 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处理restful请求的路由类分享
2014/02/27 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
jQuery使用手册之一
2007/03/24 Javascript
javascript 变量作用域 代码分析
2009/06/26 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
python使用webbrowser浏览指定url的方法
2015/04/04 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
浅析python的Lambda表达式
2019/02/27 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
django settings.py 配置文件及介绍
2019/07/15 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
雪山饭庄的创业计划书范文
2014/01/18 职场文书
投标授权委托书范文
2014/08/02 职场文书
数学备课组工作总结
2015/08/12 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js