jquery table操作在指定行后添加新行的例子
发布时间：2015-10-10 编辑：jiaochengji.com
为大家介绍如何使用jquery table操作实现在指定行后添加新行的一个例子，有需要的朋友，可以参考下。
具体实现方法，大家参见代码及注释。
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>
jquery table操作在指定行后添加新行_www.jbxue.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插件(表格排序)
您可能感兴趣的文章：
jquery获取table中内容的代码分享
jquery table操作在指定行后添加新行的例子
mysql alter语句添加、修改、删除字段的例子
jquery $.fn $.fx是什么意思有什么用
基于jQuery的表格操作插件
Jquery节点操作的几点知识
jQuery学习总结之元素的相对定位和选择器(持续更新)
jQuery的$.fn使用
jQuery中对节点进行操作的相关介绍
jQuery入门-使用tablesorter插件(表格排序)
