1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <HTML>
3 <HEAD>
4 <TITLE> New Document </TITLE>
5 <META NAME="Generator" CONTENT="EditPlus">
6 <META NAME="Author" CONTENT="">
7 <META NAME="Keywords" CONTENT="">
8 <META NAME="Description" CONTENT="">
9 <script src="style/lib/jquery.js"></script>
10 <script>
11
12 //注意input的id和tr的id要一样
13 function addRowByID(currentRowID){
14 //遍历每一行，找到指定id的行的位置i,然后在该行后添加新行
15 $.each( $('table:first tbody tr'), function(i, tr){
16 if($(this).attr('id')==currentRowID){
17 //获取当前行
18 var currentRow=$('table:first tbody tr:eq('+i+')');
19 //要添加的行的id
20 var addRowID=currentRowID+1;
21 str = "<tr id = '"+addRowID+"'><td>"+addRowID+"</td><td>row"+addRowID+"</td>"+
22 "<td><input id= '"+addRowID+"' type='button' value='添加行' onclick='addRowByID(this.id);' /></td></tr>";
23 //当前行之后插入一行
24 currentRow.after(str);
25 }
26 });
27 }
28 </script>
29 </HEAD>
30
31 <BODY>
32 <table border="1" bordercolor="green">
33 <thead>
34 <tr>
35 <th>id</th>
36 <th>value</th>
37 <th>button</th>
38 </tr>
39 </thead>
40 <tbody>
41 <!-- 这里是input的id和tr的id要一样 -->
42 <tr id='aaa'>
43 <td>0</td>
44 <td>row0</td>
45 <td><input id='aaa' type="button" value="添加行" onclick="addRowByID(this.id);" /></td>
46 </tr>
47 <tr id='bbb'>
48 <td>1</td>
49 <td>row1</td>
50 <td><input id='bbb' type="button" value="添加行" onclick="addRowByID(this.id);" /></td>
51 </tr>
52 <tr id='ccc'>
53 <td>2</td>
54 <td>row2</td>
55 <td><input id='ccc' type="button" value="添加行" onclick="addRowByID(this.id);" /></td>
56 </tr>
57 </tbody>
58 </table>
59 </BODY>
60 </HTML>
View Code
