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

最新推荐文章于 2025-12-08 11:30:01 发布

转载最新推荐文章于 2025-12-08 11:30:01 发布 · 9.1k 阅读

标签

#table #jquery #button #generator #function

本文介绍了一个使用JavaScript实现的动态向HTML表格中添加行的方法。通过点击按钮，可以在指定行之后添加新的行，并确保新增行的ID与输入框的ID相匹配。

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