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 相关文章推荐
javascript之对系统的toFixed()方法的修正
May 08 Javascript
初学JavaScript第二章
Sep 30 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
js实现按座位号抽奖
Apr 05 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
vuex vue简单使用知识点总结
Aug 29 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批量删除数据
2007/01/18 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
Javascript面向对象编程
2012/03/18 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
javascript实现日历效果
2019/06/17 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
python中尾递归用法实例详解
2015/04/28 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
Python三级菜单的实例
2017/09/13 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
python for 循环获取index索引的方法
2019/02/01 Python
python+pyqt5编写md5生成器
2019/03/18 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
中学生期末评语
2014/02/03 职场文书
陈欧广告词
2014/03/14 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android