table非表示列の選択


常にtableを表示する行に遭遇し、tableの列を隠す必要がある場合もある.
例えば、表には「名称」、「プロフィール」、「クリック数」、「発表時間」などがあり、今は発表時間を隠すなどを選択したい.次のテスト例を示します.
 
htmlページが2つあります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="      " onclick="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="  " onclick="h()"></input>
			</td>
		</tr>
	</table>
</body>
</html>