Table列动态显示/隐藏

[moonhlg]

列名：A,a1,B,b1
A和a1,B和b1为相关列。
希望得到效果：
双击A列名，显示或隐藏a1列；双击B列名，显示或隐藏b1列。
或者加按钮或者鼠标触发a1、b1列的显示或隐藏，只要能实现效果就行了。
最好有相关的代码进行举例：）

[zhanghk]

up

[xuzuning]

<table border onDblClick="cell_display()">
<tr>
<th>A</th><th>B</th><th>C</th>
</tr>
<tr>
<td>a1</td><td>b1</td><td>c1</td>
</tr>
<tr>
<td>a2</td><td>b2</td><td>c2</td>
</tr>
</table>
<script>
function cell_display() {
el = event.srcElement;
if(el.tagName == "TD" || el.tagName == "TH") {
k = el.cellIndex;
el = el.parentElement.parentElement
for(i=0;i<el.rows.length;i++)
el.children[i].children[k].style.display = "none";
}
}
</script>

[Go_Rush]

<style>
td.a{display:expression((d1%2)?"none":"block")}
td.b{display:expression((d2%2)?"none":"block")}
</style>

<script>
var d1=0
var d2=0
</script>

<table border width=400>
<tr><td onclick="++d1">A</td><td class=a>a1</td>
<td onclick="++d2">B</td><td class=b>b1</td></tr>

<tr><td>A</td><td class=a>a1</td><td>B</td><td class=b>b1</td></tr>
<tr><td>A</td><td class=a>a1</td><td>B</td><td class=b>b1</td></tr>
<tr><td>A</td><td class=a>a1</td><td>B</td><td class=b>b1</td></tr>
</table>

[Go_Rush]

<button onclick="++d1">隐藏显示a1列</button>
<button onclick="++d2">隐藏显示b1列</button>

[meizz]

<table border=1 width=200>
<tr id=tr1><td>a1</td></tr>
<tr id=tr2><td>b1</td></tr>
</table>

<input type=checkbox onclick="tr1.style.display=(this.checked)?'none':''">隐藏a1行<br>
<input type=checkbox onclick="tr2.style.display=(this.checked)?'none':''">隐藏b1行<br>

[rengs]

<script language="javascript">
function dispCol()
{
var n=2;
var src=window.event.srcElement;
if (eval(src.id+"0").style.display =="")
for (i=0;i<=n;i++)
{
eval(src.id+i).style.display ="none";
}
else
for (i=0;i<=n;i++)
{
eval(src.id+i).style.display ="";
}
}
</script>
<table border=1>
<tr>
<td id=a ondblclick=dispCol()>A</td>
<td id=a0 style=display:none >a1</td>
<td id=b ondblclick=dispCol()>B</td>
<td id=b0 style=display:none>b1</td>
</tr>
<tr>
<td > </td>
<td id=a1 style=display:none>g</td>
<td > </td>
<td id=b1 style=display:none>d</td>
</tr>
<tr>
<td > </td>
<td id=a2 style=display:none>g</td>
<td > </td>
<td id=b2 style=display:none>d</td>
</tr>
</table>

[Reagan]

<script language="javascript">
function hidecol()
{
a = 10;
b = 6;
for (i=0;i<a;i++)
for(j=0,j<b,j++)
document.all.tableid.rows[i].cells[j].style.display = 'none';
}
function showcol()
{
a = 10;
b = 6;
for (i=0;i<a;i++)
for(j=0,j<b,j++)
document.all.tableid.rows[i].cells[j].style.display = 'inline';
}
</script>

[zhanghk]

up