具体实现方法,大家参见代码及注释。
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>jquery table操作在指定行后添加新行_www.jb200.com</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>
您可能感兴趣的文章:
jquery获取table中内容的代码分享
jquery操作table的实例代码
jQuery操作checkbox选择(list/table)的代码分享
jQuery入门-使用tablesorter插件(表格排序)