<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
var str='';
function toggle(obj) {
debugger;
hidden_groups();
var el = document.getElementById(obj);
el.style.display = (el.style.display != 'none' ? 'none' : '' );
}
function hidden_groups() {
debugger;
var tbl = document.getElementById('table_id');
var rows = tbl.getElementsByTagName('tr');
var cels = rows[0].getElementsByTagName('th');
for (var i=2; i < 6; i++) {
if (cels[i].style.display == 'none') {str += 'number'+ i +'<br />'}
};
return str;
}
function show_hide_column(btn,gr_name) {
//debugger;
var gr_no;
switch (gr_name) {
case "Sales" :
gr_no = 2;
break;
case "HR" :
gr_no = 3;
break;
case "CSC" :
gr_no = 4;
break;
case "AD" :
gr_no = 5;
break;
case "FD" :
gr_no = 6;
break;
default : alert('The nonexistent group is chosen !')
}
var tbl = document.getElementById('table_id');
var rows = tbl.getElementsByTagName('tr');
stl = btn.checked ? '' : 'none';
// Group Name
var cels = rows[0].getElementsByTagName('th')
cels[gr_no].style.display=stl;
}
</script>
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" id="table_id">
<tr>
<th bgcolor="#999999" scope="col" onclick="toggle('sh_div')">++++</th>
<th bgcolor="#999999" scope="col">General</th>
<th bgcolor="#999999" scope="col"><input type=checkbox id="gr2" onClick="show_hide_column(this,'Sales')" checked> Sales</th>
<th bgcolor="#999999" scope="col"><input type=checkbox id="gr3" onClick="show_hide_column(this,'HR')" checked>
HR</th>
<th bgcolor="#999999" scope="col"><input type=checkbox id="gr4" onClick="show_hide_column(this,'CSC')" checked>
CSC</th>
<th bgcolor="#999999" scope="col"><input type=checkbox id="gr5" onClick="show_hide_column(this,'AD')" checked> AD</th>
<th bgcolor="#999999" scope="col"><input type=checkbox id="gr6" onClick="show_hide_column(this,'FD')" checked> FD</th>
</tr>
</table>
<!-- hidden div -->
<div align="center" id="sh_div" style=" top:240px; HEIGHT:10px; WIDTH:150px; display:none; position:absolute" onclick="toggle('sh_div')">
<table border="0" width="100%" bgcolor="#000000"
cellspacing="1" cellpadding="2">
<TBODY>
<tr>
<td align="middle" bgcolor="#FFFFE1">
<script type="text/javascript">
//hidden_groups();
document.write(hidden_groups());
</script>
</td>
</tr>
</TBODY>
</table>
</div>
</body>
</html> |