我要投稿

为table添加行

HTML html

2015-01-11 0 770

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-2.1.0.js">
			
		</script>
	</head>
	<body>
		<table id="toptable">
			<tr class="lrbj_tr">
				<td>
					<input type="text" />
				</td>
				<td>
					<input type="" name="" id="" value="" />
				</td>
				<td>
					<input type="text" />
				</td>
			</tr>
			<tr>
				<td>
					<input type="button" value="添加" id="add" />
					
				</td>
			</tr>
			
			
		</table>
	</body>
</html>
<script type="text/javascript">
function init()
{
	
	$('#add').click(function(){ //为添加按钮添加点击事件
		 var childrenCount = $("#topTable").length;//获取table下子元素个数
		 var insertIndex = childrenCount -1;//获取倒数第二个tr
		 var addElem = $("<tr><td><input type=\"text\"/></td><td><input type=\"text\" /></td><td><input type=\"text\" ></td></tr>");//定义添加的tr行，注意要转义字符”\”
			addElem.insertAfter($("tr.lrbj_tr:eq("+insertIndex+")"));//在倒数第二个tr后插入新添加的tr行
	  
	});
}
$.ready(init());

</script>

收藏 (0) 点赞 (0)

遇见资源网 html 为table添加行 http://www.ox520.com/13999.html