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

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