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中的作用域scope介绍
Dec 28 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
php mail to 配置详解
2014/01/16 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
js常用DOM方法详解
2017/02/04 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
Python中标准模块importlib详解
2017/04/16 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
使用python去除图片白色像素的实例
2019/12/12 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
总经理助理的职责
2014/03/14 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
党小组推荐意见
2015/06/02 职场文书
常住证明范本
2015/06/23 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL