<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS控制表格的列顯示和隱藏</title>
</head>
<script>
/*
* 控制表格的列顯示和隱藏
* 使用方法：在網頁讀取時調用control_show()方法即可。
* 說明：
* table_cell_dis()方法爲獲取 顯示/隱藏 控制欄。
* tb_showbox()方法爲顯示和隱藏的效果具體實現
* 注：目前該功能僅適用於表格操作！
* 該方法在功能上沒問題！但是chrome和火狐的顯示效果會出問題！目前還沒找到解決方案。
* 可修改部分：
* 表格ID，
* cate變量賦值
* 製作人：譚寧寧
* 製作時間：2011-08-26
*/
function control_show()
{
//獲取id爲table_list的表格的所有元素
var table = document.getElementById("table_list");
var cate='';
for(var j=1;j<table.rows[0].cells.length;j++)
{
//此處爲寫入到表格裏的td單元格里的內容，即控制欄
//此處可以修改爲你想要樣式
//注意input的id和onclick事件！默認checkbox爲選中狀態
cate+="<span><input id='cbox"+j+"' type='checkbox' checked='checked' onclick='tb_showbox("+j+")' />"+table.rows[0].cells[j].innerHTML+"</span>";
}
//寫入到網頁裏邊,這裏用了一個id爲control的DIV！
document.getElementById('control').innerHTML="<span>顯示/隱藏控制</span>"+cate;
}
/*
* 控制表格列顯示或隱藏的具體功能實現
*/
function tb_showbox(num)
{
var obj=document.getElementById('table_list');
var box=document.getElementById('cbox'+num);
//alert(num);
if(box.checked)
{
for(i=0;i<obj.rows.length;i++)
{
//alert('顯示：'+obj.rows[i].cells[num]);
obj.rows[i].cells[num].style.display = "block";
}
}
else
{
for(i=0;i<obj.rows.length;i++)
{
//alert('隱藏：'+obj.rows[i].cells[num]);
obj.rows[i].cells[num].style.display = "none";
}
}
}
//該功能的相關資料
//--------------------------------------------------------------------
//獲取表格當前的行數，使用 getrow(this)來調用
/*
function getrow(obj)
{
if(event.srcElement.tagName=="TD")
{
curRow=event.srcElement.parentElement;
alert("這是第"+(curRow.rowIndex+1)+"行");
}
}*/
//獲取表格每行的元素
/*
var table = document.all("bg");
for(var i=0;i<table.rows.length;i++)
{
for(var j=0;j<table.rows[i].cells.length;j++)
{
alert(table.rows[i].cells[j].innerHTML);
}
}
//--------------------------------------------------------------------
*/
</script><style>body{ font-size:12px; font-family:"宋體"; margin:0px; padding:5px;}table{ width:960px;}table td.c_tit{ font-weight:bold;}.control{ width:958px; margin:0px; font-weight:bold; border:#000 1px solid; margin:2px;}.control span{ width:auto; line-height:180%; padding-left:10px; padding-right:10px; display:inline-block;}</style><body onload="control_show()"><div class="control" id="control"></div><table border="1" cellspacing="2" id="table_list"><tr><td class="c_tit">第一行：標題行！</td><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td><td>第五列</td></tr><tr><td class="c_tit">第二行</td><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td><td>第五列</td></tr><tr><td class="c_tit">第三行</td><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td><td>第五列</td></tr></table></body>