table 选择隐藏列-CSDN博客

经常碰到不显示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>