jquery的table操作之在指定行后添加新行

huibin

浏览: 740604 次
性别:
来自: 郑州

最近访客更多访客>>

allen900625

dameimm

cntip2010

马桶拔子

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

<!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>

分享到：

java 给图片加文字水印 | 时间管理101招

2011-12-30 16:02
浏览 3035
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery的table操作之在指定行后添加新行

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery的table操作之在指定行后添加新行

评论

发表评论

相关推荐

jquery.corner插件的图片角处理

jQuery删除元素remove

解决jQuery中dbclick事件触发两次click事件

模拟超链接单击事件

jQuery-Draggable参数介绍

jquery.ui.draggable中文文档

jQuery EasyUI 可拖放(Draggable)用法

JQuery获得绝对,相对位置的坐标方法

Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID

25个超棒的jQuery日历和日期选取插件

30个最佳 jQuery Lightbox 效果插件

60款很酷的 jQuery 幻灯片演示和下载

10款新鲜出炉的 jQuery 插件

jquery UI: 推荐8个独特应用的JQuery拖放插件Table Drag plugin

jquery1.4后 jqDrag 拖动 不可用

解决flexgrid的属性showToggleBtn为false,时的bug

jqmodal遮罩层的实现

jquery imgareaselect 使用利用js与程序结合实现图片剪切

240多个jQuery插件

JQuery 技术以及相关插件网址

最近访客更多访客>>

jquery1.4后 jqDrag 拖动不可用