使用jquery在table指定行后添加新行

转载 2012年05月23日 15:18:28
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="style/lib/jquery.js"></script>
<script>

   //注意input的id和tr的id要一样
   function addRowByID(currentRowID){
       //遍历每一行,找到指定id的行的位置i,然后在该行后添加新行
       $.each( $('table:first tbody tr'), function(i, tr){
           if($(this).attr('id')==currentRowID){
               //获取当前行
               var currentRow=$('table:first tbody tr:eq('+i+')');
               //要添加的行的id
               var addRowID=currentRowID+1;
               str = "<tr id = '"+addRowID+"'><td>"+addRowID+"</td><td>row"+addRowID+"</td>"+
               "<td><input id= '"+addRowID+"' type='button' value='添加行' onclick='addRowByID(this.id);' /></td></tr>";
               //当前行之后插入一行
               currentRow.after(str);
           }
       });
   }
</script>
</HEAD>

<BODY>
   <table border="1" bordercolor="green">
       <thead>
           <tr>
               <th>id</th>
               <th>value</th>
               <th>button</th>
           </tr>
       </thead>
       <tbody>
           <!-- 这里是input的id和tr的id要一样 -->
           <tr id='aaa'>
               <td>0</td>
               <td>row0</td>
               <td><input id='aaa' type="button" value="添加行" onclick="addRowByID(this.id);" /></td>
           </tr>
           <tr id='bbb'>
               <td>1</td>
               <td>row1</td>
               <td><input id='bbb' type="button" value="添加行" onclick="addRowByID(this.id);" /></td>
           </tr>
           <tr id='ccc'>
               <td>2</td>
               <td>row2</td>
               <td><input id='ccc' type="button" value="添加行" onclick="addRowByID(this.id);" /></td>
           </tr>
       </tbody>
   </table>
</BODY>
</HTML>


SHELL 在指定行的前/后插入指定内容

#如果知道行号可以用下面的方法 sed -i '88 r b.file' a.file    #在a.txt的第88行插入文件b.txt awk '1;NR==8...
  • weiyuefei
  • weiyuefei
  • 2017年04月01日 13:59
  • 5174

sed 在指定行后添加新数据

1. sed 的 追加 a 选项 cat txt aaa 111 bbb ccc 222 ddd eee 333 ggg jjj 444 kkk hhh 555 lll mmm 666 nnn jjj...
  • caoshuming_500
  • caoshuming_500
  • 2013年04月26日 03:29
  • 23542

JQuery实现表格自动增加行,对新行添加事件

效果: 一:原始页面
  • apollokk
  • apollokk
  • 2014年07月30日 11:37
  • 13711

Jquery删除表格某一行后的所有行

1、获得某个table某一行后的所有行 $("table tr").eq(1).nextAll().remove();
  • luguling200802544
  • luguling200802544
  • 2015年06月10日 09:49
  • 402

用Jquery获取Table指定行中指定列的数值

例如说第三行第五列 我的想法是$("tr:eq(3)").next("td:eq(5)") 但是并不成功 单独获取其中一部分都没有问题 两个eq一块用就不能识别了 next 是取同辈元素,不...
  • xusongsong520
  • xusongsong520
  • 2012年11月02日 22:14
  • 1486

CSS设计表格(中)--jQuery实现删除指定行

前言    上一节,利用CSS实现了一个样式表格,增加了全选功能,本节利用jQuery实现删除指定行功能。如下效果图:     实现代码    table3.html内容    Tab...
  • mybelief321
  • mybelief321
  • 2015年12月13日 15:09
  • 4894

table标签添加行和删除行(Jquery)

table标签添加行和删除行
  • ZJDWHD
  • ZJDWHD
  • 2016年12月21日 16:18
  • 2331

js 动态操作table 表格 在指定行后添加行 删除行

//根据ID删除table行 var tr_id = $("#addTable>tbody>tr:last").attr("id"); if(tr_id == '123'){ $('#'+tr_...
  • zhu_nana
  • zhu_nana
  • 2016年11月16日 10:38
  • 2541

jquery操作table 数据行拷贝,和上下移动

业务需求,选择未选素材添加到已选sca
  • jurs30
  • jurs30
  • 2014年08月20日 10:51
  • 2872

jquery动态表格,动态添加表格行

效果图:(打包下载) Html: html> head>     title>jquery表格操作title>     script language="javascript" src="jquer...
  • a497785609
  • a497785609
  • 2013年05月09日 17:44
  • 2333
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用jquery在table指定行后添加新行
举报原因:
原因补充:

(最多只允许输入30个字)