table 选择隐藏列

经常碰到不显示table的某一行,有时也需要隐藏table的一列.

比如表格有'名称','简介','点击数','发表时间'等,现在想选择隐藏发表时间等.以后是个测试例子:

 

共有两个html页面,index.html和sub.html

 

index.html

<html>
<head>
	<script>
		function select_onClick(){
			tempvalue = window.showModelessDialog("sub.html",window,"dialogHeight:570px;dialogWidth:650px;dialogTop:120px;dialogLeft:100px");  	
			if(tempvalue!=null){
				
			}
		}
	</script>
</head>
<body>

	<table>
		<tr>
			<td colspan="4">
				<input type="button" value="选择显示的列" οnclick="select_onClick()"></input>
			</td>
		</tr>
	</table>
	<table border="1">
		
		<col id="col1">
        <col id="col2">
        <col id="col3">
        <col id="col4">
		
		
		<tr>
			<td>
				名称
			</td>
			
			<td>
				简介
			</td>
			
			<td>
				点击数
			</td>
			
			<td>
				发表时间
			</td>
		</tr>
		
		<tr>
			<td>
				渔童 
			</td>
			
			<td>
				这天小破孩闲来无事去钓鱼,钓了一条特殊的鱼,也可以说是这条鱼钓到了小...
			</td>
			
			<td>
				1000
			</td>
			
			<td>
				2008-1-31 9:07:28 
			</td>
		</tr>
		
		<tr>
			<td>
				圆蛋风波  
			</td>
			
			<td>
				小丫请小破孩吃饭,让小破孩自带鸡蛋:)因此,小破孩悄悄的走向鸡舍…… 
			</td>
			
			<td>
				1099
			</td>
			
			<td>
				2008-1-1 9:07:45 
			</td>
		</tr>
		
		<tr>
			<td>
				小破孩再生蛋 
			</td>
			
			<td>
				小破孩前年生了一个蛋,去年又生了一个蛋,今年再生一个蛋…… 
			</td>
			
			<td>
				2333
			</td>
			
			<td>
				2008-2-3 12:34:33
			</td>
		</tr>
		
		<tr>
			<td>
				射雕后传 
			</td>
			
			<td>
				中秋节是小破孩的生日,今年破孩小丫已经五岁了。…… 
			</td>
			
			<td>
				788
			</td>
			
			<td>
				2007-2-3 12:34:33
			</td>
		</tr>
	</table>
</body>
</html>

 

sub.html

<html>
<head>
	<script>
		function h(){
			var c = document.getElementsByName("cb");
		    var w=window.dialogArguments;
		    var s="";
		    for(var i = 0; i < c.length; i++){
				var t = w.document.getElementById(c[i].value);
				if(c[i].checked){
				     if(s==""){
				       s=c[i].value;
				     }else{
				       s=s+","+c[i].value;
				     }
					 t.style.display="";
				}else{
					 t.style.display="none";
				}
		    }
		}
	</script>
</head>
<body>
	<table border="1">
		<tr>
			<td>
				<input type="checkbox" name="cb" value="col1" checked>名称</input>
				
				<input type="checkbox" name="cb" value="col2" checked>简介</input>
				
				<input type="checkbox" name="cb" value="col3" checked>点击数</input>

				<input type="checkbox" name="cb" value="col4" checked>发表时间</input>
			</td>
		</tr>
		
		<tr>
			<td colspan="4">
				<input type="button" value="确定" οnclick="h()"></input>
			</td>
		</tr>
	</table>
</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值