JS显示隐藏行或列

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 显示隐藏列 </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function setHiddenCol(oTable,iCol)
{
       for (i=0;i < oTable.rows.length ; i++)
       {
           oTable.rows[i].cells[iCol].style.display = oTable.rows[i].cells[iCol].style.display=="none"?"block":"none";
       }
}
function setHiddenRow(oTable,iRow)
{
       oTable.rows[iRow].style.display = oTable.rows[iRow].style.display == "none"?"block":"none";
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<TABLE id="Table1" cellSpacing="1" cellPadding="1" border="1">

<TR>
<TD width="20%">00</TD> <TD width="20%" bgcolor="#E3E3E3">01</TD> <TD width="20%">02</TD>
</TR>
<TR>
<TD width="20%" bgcolor="red">10</TD> <TD width="20%" bgcolor="green">11</TD> <TD width="20%" bgcolor="red">12</TD>
</TR>
<TR>
<TD width="20%">20</TD> <TD width="20%" bgcolor="#E3E3E3">21</TD> <TD width="20%">22</TD>
</TR>
</TABLE> </P>


<INPUT id="btnHiddenCol" type="button" value="显示/隐藏第2列" name="btnHiddenCol" onClick="setHiddenCol(document.getElementById('Table1'),1)">
<INPUT id="btnHiddenRow" type="button" value="显示/隐藏第2行" name="btnHiddenRow" onClick="setHiddenRow(document.getElementById('Table1'),1)">
</BODY>
</HTML>

posted on 2011-08-07 23:16  静以修身俭以养德  阅读(3701)  评论(0编辑  收藏  举报

导航