jquery 动态增加删除行的简单实例(推荐)


Posted in Javascript onOctober 12, 2016

最近写程序,碰巧有动态增加删除行,下面就记录一下

html就不写了,也没有什么,直接上核心了

新增行

function addRow(obj){
//获得table一共有多少行,方便追加的时候给序号赋值
  var length = $("#grid tr").length;

//获得当前是第几行,以便追加的时候,在该行下进行新增,我这里跨的级别比较多,根据实际层级去定义
  var current = $(obj).parent().parent().parent().prevAll().length;
//   alert(current);

//这里主要定义需要追加的内容,当然要从tr开始,很简单,大家都会的
  var addContent = "";

//核心方法,gird是table的id,current是在第几行后插入,addContent就是要追加的内容了
  addTr('grid',current,addContent);

//这里是重新排序,将序号从1到n重新排序,碰巧我的代码里第一个tr是不显示的,所以就不+1了
  $("#grid tr").each(function(index){
     if(index != 0){
       $(this).children('td').eq(0).text(index);
     }
  });
}

好,下面我们看下addTr方法~~这个是在网上找到的,还是蛮好用的

/**
 * 为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 deleteRow(obj){
//移除
   $(obj).parent().parent().parent().remove();

//重新排序,如果删除的不是最后一行,不重新排序就不能看了~
   $("#grid tr").each(function(index){
     if(index != 0){
       $(this).children('td').eq(0).text(index);
     }
   });
   
}

动态添加删除行,就这么几行代码,方便大家使用

ps:  $(this).prevAll().length + 1;//列

以上就是小编为大家带来的jquery 动态增加删除行的简单实例(推荐)全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
老生常谈javascript的类型转换
Oct 12 #Javascript
vue制作加载更多功能的正确打开方式
Oct 12 #Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 #Javascript
深入理解Node.js的HTTP模块
Oct 12 #Javascript
纯js实现手风琴效果代码
Apr 17 #Javascript
JavaScript 继承详解(六)
Oct 11 #Javascript
JavaScript 继承详解(五)
Oct 11 #Javascript
You might like
PHP也可以?成Shell Script
2006/10/09 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
php精度计算的问题解析
2019/06/21 PHP
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
自荐信如何“自荐”
2013/10/24 职场文书
《狼》教学反思
2014/03/02 职场文书
成绩单家长评语大全
2014/04/16 职场文书
培训研修方案
2014/06/06 职场文书
初中学习计划书范文
2014/09/15 职场文书
服务整改报告
2014/11/06 职场文书
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS