jquery table 增加两行,删除两行,并且有跨行rowspan

xiaojin21cen

浏览: 98996 次
性别:
来自: 北京

最近访客更多访客>>

liukp981

arthorwei

loadsave

heyongkui

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

table 每次同时增加两行或同时删除两行, 并且此两行间有跨行rowspan.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-5-2</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
	<input type="button" class="button" onclick="addTable()"	value="增加">					
		<table id="table1" cellpadding="1" cellspacing="1" border="1" width="500" >
			<tr>
				<th width="30%" >
					操作
				</th>
				<th width="40%">
					文件名称
				</th>
				<th width="30%">
					上传时间
				</th>				
			</tr>		
				<tr id='tr1'>
					<td  rowspan="2" >
						<input type="button" onclick="deleteTable0(this)" value="删除" >
						<span id="ss">a</span>
					</td>
					<td>
					文件名称1111
					</td>
					<td>
						11111111
					</td>				
				</tr>
				<tr id='tr2'>				
					<td >
					文件名称2222
					</td>
					<td >
						222222
					</td>				
				</tr>			
				<tr id='trbefore'>
					<td  >
						aaaaaaaaaaaa
					</td>
					<td >
					aaaaaaaaaaaaa
					</td>
					<td >
						aaaaaaaaaa
					</td>				
				</tr>
		</table>		
		
<script language="JavaScript">

var $tr1 = $("#tr1").remove();
var $tr2 = $("#tr2").remove();
var i=0;

//增加两行
function addTable() {
	i++;
    $("#trbefore").before($tr1.clone().find("#ss").html("文件"+i).end());	
    $("#trbefore").before($tr2.clone());	
}
function deleteTable0(obj) {
	i--;
	//先删除当前行的下面的一行
	$(obj.parentNode.parentNode).next().remove(); 
	//然后再删除当前行
	$(obj.parentNode.parentNode).remove(); 	
}

</script>
</body>
</html>

分享到：