利用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 相关文章推荐
Javascript操纵Cookie实现购物车程序
Nov 23 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
js中this对象用法分析
Jan 05 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
vue实现前端列表多条件筛选
Oct 26 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
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数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
Web服务器框架 Tornado简介
2014/07/16 Python
python连接oracle数据库实例
2014/10/17 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
车间调度岗位职责
2013/11/30 职场文书
学校后勤人员职责
2013/12/27 职场文书
化学实验员岗位职责
2013/12/28 职场文书
党校学习思想汇报
2014/01/06 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
机关单位动员会主持词
2014/03/20 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
先进个人材料怎么写
2014/12/30 职场文书
数学教师求职信范文
2015/03/20 职场文书
大学生活感想
2015/08/10 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python