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

最新推荐文章于 2021-09-29 13:44:30 发布

skytalemcc

最新推荐文章于 2021-09-29 13:44:30 发布

阅读量3.8k

点赞数

分类专栏： jQuery 文章标签： table jquery button generator function input

jQuery 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!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='添加行' οnclick='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>
           
           <tr id='aaa'>
               <td>0</td>
               <td>row0</td>
               <td><input id='aaa' type="button" value="添加行" οnclick="addRowByID(this.id);" /></td>
           </tr>
           <tr id='bbb'>
               <td>1</td>
               <td>row1</td>
               <td><input id='bbb' type="button" value="添加行" οnclick="addRowByID(this.id);" /></td>
           </tr>
           <tr id='ccc'>
               <td>2</td>
               <td>row2</td>
               <td><input id='ccc' type="button" value="添加行" οnclick="addRowByID(this.id);" /></td>
           </tr>
       </tbody>
   </table>
</BODY>
</HTML>

skytalemcc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jquery的table操作之在指定行后添加新行

New Document //注意input的id和tr的id要一样 function addRowByID(currentRowID){ //遍历每一行，找到指定id的行的位置i,然后在该行后添加新行 $.each( $(table:first tbody tr), function(i, tr){ if($(this).attr(i
复制链接

扫一扫