jquery 动态增加删除行
最近写程序,碰巧有动态增加删除行,下面就记录一下
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 动态增加删除行的更多相关文章
- jquery动态增加或删除tr和td【实际项目】
难点: (1)动态增加.删除tr和td (2)每天tr和td都有下标,且下标要动态变化, (3)tr和td为什么下标不能随便写,原因是此处需要把所有tr中的数据以list的形式发送到后台对象中,所有每 ...
- jquery 动态增加的html元素,初始化设置在id或class上的事件无效
一般情况,我们会在页面初始化完成后对class定义一些全局事件,举个栗子: $(document).ready(function(){ $(".class").on("m ...
- 解决jquery动态增加元素后children值没有变的问题
html代码如下: <ul id="attr_input_panel"> <li> <div class="attr_input_item& ...
- Jquery动态增加行和删除行
$("#add_5").click(function(){ var str_1="<tr> <td><input type=\"t ...
- jquery 动态增加table行,动态删除table行
在html中我们大量的用到了局部刷新,局部刷新就是使用js来动态的修改html局部的数据.下面来介绍下使用jquery来动态的增加table的行,当然这种方式可以适用到任何的html组件中去. < ...
- JQuery动态增加删除元素
<form action="" method="post" enctype="multipart/form-data"> < ...
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...
- jQuery实现表格行的动态增加与删除(改进版)
之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...
- jquery如何实现动态增加选择框
jquery如何实现动态增加选择框 一.总结 一句话总结:用jquery的clone(true)方法. 1.如何在页面中复制amazeui加了特效的标签? amazeui中的控件带js方法,不知道那部 ...
随机推荐
- Java Web开发技术教程入门-JavaBean组件与Servlet
补更:阅战阅勇第7/8/9Days笔记 昨天我们了解了JDBC技术的一些日常操作,对于数据库而言,不仅仅的只有"增,删,改,查".博主觉得最重要的是SQL语句的优化,一个" ...
- Collection接口的子接口——Queue接口
https://docs.oracle.com/javase/8/docs/api/java/util/Queue.html public interface Queue<E> exten ...
- 类的函数成员之属性property
属性命名采用Pascal命名方式,每个单词的首字母大写.访问方式与访问类的公共字段类似. /// <summary> /// 字段 /// </summary> private ...
- Echarts常见问题汇总
关于echarts使用的常见问题总结 来源:李文杨 关于echarts使用的问题总结1.legend图例不显示的问题:在legend中的data为一个数组项,数组项通常为一个字符串,每一项需要对应一 ...
- 关于catopen函数
关于catopen函数: 参考网址:http://pubs.opengroup.org/onlinepubs/009695399/functions/catopen.html 1)编辑消息文件 [ro ...
- 理解js异步编程
Promise 背景 javascript语言的一大特点就是单线程,在某个特定的时刻只有特定的代码能够被执行,并阻塞其它的代码,也就是说,同一个时间只能做一件事. 怎么做到异步编程?回调函数.直到no ...
- mac系统下Eclipse + pydev配置python Interpreter
mac系统下Eclipse + pydev配置python Interpreter 之前都在windows下使用Eclipse + pydev 进行开发,未发现什么异常,最近对wxpy.itcha ...
- 17、Nginx HTTPS 实践
1.HTTPS安全证书基本概述 为什么需要使用HTTPS, 因为HTTP不安全.当我们使用http网站时,会遭到劫持和篡改,如果采用https协议,那么数据在传输过程中是加密的,所以黑客无法窃取或者篡 ...
- QT Qdialog的对话框模式以及其关闭
模式对话框 描述 阻塞同一应用程序中其它可视窗口输入的对话框.模式对话框有自己的事件循环,用户必须完成这个对话框中的交互操作,并且关闭了它之后才能访问应用程序中的其它任何窗口.模式对话框仅阻止访问与对 ...
- openstack Rocky系列之keystone:(二)keystone中API注册
主要说一下initialize_application中的application_factory def loadapp(): app = application.application_factor ...