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

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 动态增加删除行的更多相关文章

  1. jquery动态增加或删除tr和td【实际项目】

    难点: (1)动态增加.删除tr和td (2)每天tr和td都有下标,且下标要动态变化, (3)tr和td为什么下标不能随便写,原因是此处需要把所有tr中的数据以list的形式发送到后台对象中,所有每 ...

  2. jquery 动态增加的html元素,初始化设置在id或class上的事件无效

    一般情况,我们会在页面初始化完成后对class定义一些全局事件,举个栗子: $(document).ready(function(){ $(".class").on("m ...

  3. 解决jquery动态增加元素后children值没有变的问题

    html代码如下: <ul id="attr_input_panel"> <li> <div class="attr_input_item& ...

  4. Jquery动态增加行和删除行

    $("#add_5").click(function(){ var str_1="<tr> <td><input type=\"t ...

  5. jquery 动态增加table行,动态删除table行

    在html中我们大量的用到了局部刷新,局部刷新就是使用js来动态的修改html局部的数据.下面来介绍下使用jquery来动态的增加table的行,当然这种方式可以适用到任何的html组件中去. < ...

  6. JQuery动态增加删除元素

    <form action="" method="post" enctype="multipart/form-data"> < ...

  7. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  8. jQuery实现表格行的动态增加与删除(改进版)

    之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...

  9. jquery如何实现动态增加选择框

    jquery如何实现动态增加选择框 一.总结 一句话总结:用jquery的clone(true)方法. 1.如何在页面中复制amazeui加了特效的标签? amazeui中的控件带js方法,不知道那部 ...

随机推荐

  1. python-day40(正式学习)

    目录 线程队列 1 2 3 线程定时器 进程池和线程池 线程队列 1 import queue q=queue.Queue() q.put('123') q.put('456') q.put('789 ...

  2. python网络编程——使用UDP、TCP协议收发信息

    UDP UDP是面向无连接的通讯协议,UDP数据包括目的端口号和源端口号信息,由于通讯不需要连接,所以可以实现广播发送. UDP传输数据时有大小限制,每个被传输的数据报必须限定在64KB之内. UDP ...

  3. CSS(上)

    目录 CSS(上) 什么是CSS? CSS的优点 CSS的引入方式 行内样式 内部样式 外部样式 CSS的两大特性 CSS选择器 基本选择器 组合选择器 更多选择器 选择器的优先级 CSS(上) 什么 ...

  4. Arkady and a Nobody-men CodeForces - 860E (虚树)

    大意: 给定有根树, 根节点深度为$1$. 定义$r(a,b)$为$b$子树内深度不超过$a$的节点数$-1$ 定义$z_a$为$a$的所有祖先的$r$之和. 对于所有点求出$z$的值. 一个点$y$ ...

  5. 数据结构(三) 树和二叉树,以及Huffman树

    三.树和二叉树 1.树 2.二叉树 3.遍历二叉树和线索二叉树 4.赫夫曼树及应用 树和二叉树 树状结构是一种常用的非线性结构,元素之间有分支和层次关系,除了树根元素无前驱外,其它元素都有唯一前驱. ...

  6. python 中的 [:-1] 和 [::-1]

    1.案例解释 a='python' b=a[::-1] print(b) #nohtyp c=a[::-2] print(c) #nhy #从后往前数的话,最后一个位置为-1 d=a[:-1] #从位 ...

  7. luogu题解 P2419 【牛大赛Cow Contest】传递丢包

    题目链接: https://www.luogu.org/problemnew/show/P2419 分析: "在交际网络中,给定若干元素和若干对二元关系,且关系具有传递性. 通过传递性推导出 ...

  8. jquery简单实现表格隔行变色

    小知识点:odd的过滤选择器大的使用 html代码: <table> <tr> <td>用户名</td> <td>年龄</td> ...

  9. Python(os和sys)理解

    Python(os和sys)理解 os模块负责程序与操作系统的交互,提供了访问操作系统底层的接口; sys模块负责程序与python解释器的交互,提供了一系列的函数和变量,用于操控python的运行时 ...

  10. liboqs-量子安全密码算法开源C库

    liboqs是一个用于量子安全密码算法的开源C库. 一,概述 liboqs提供: 量子安全 密钥封装机制(KEM)和数字签名算法的开源实现的集合: 这些算法的通用API: 测试工具和基准测试例程. l ...