1. 程式人生 > >用Js,DHTML控制表格的某一列的顯示與隱藏

用Js,DHTML控制表格的某一列的顯示與隱藏

<!DOCTYPE  HTML  PUBLIC  "-//W3C//DTD  HTML  4.0  Transitional//EN">
<HTML>
<HEAD>
<TITLE>  New  Document  </TITLE>
<META  NAME="Generator"  CONTENT="EditPlus">
<META  NAME="Author"  CONTENT="">
<META  NAME="Keywords"  CONTENT="">
<META  NAME="Description"  CONTENT="">
</HEAD>

<!DOCTYPE  HTML  PUBLIC  "-//W3C//DTD  HTML  4.0  Transitional//EN">
<HTML>
<HEAD>
<TITLE>  New  Document  </TITLE>
<META  NAME="Generator"  CONTENT="EditPlus">
<META  NAME="Author"  CONTENT="">
<META  NAME="Keywords"  CONTENT="">
<META  NAME="Description"  CONTENT="">
</HEAD>

<BODY>
<SCRIPT  LANGUAGE="JavaScript">
<!--
//初始化時一定要隱一列
function  initHide(cell)
{
        obj  =  document.getElementById("showTb");
        for(i=0;i<obj.rows.length;i++)
        {
                        obj.rows[i].cells[cell].style.display  =  "none";
        }
}


//隱列
function  hide(cell)
{
        obj  =  document.getElementById("showTb");
        //obj.style.display        =        "none";
        //obj.rows[0].style.display  =  "none";        //隱藏第一行
        for(i=0;i<obj.rows.length;i++)
        {
                        obj.rows[i].cells[cell].style.display  =  "none";
        }
}


//  顯列
function  show(cell)
{
        obj  =  document.getElementById("showTb");
        for(i=0;i<obj.rows.length;i++)
        {
                obj.rows[i].cells[cell].style.display  =  "block";
        }
}

//-->
</SCRIPT>
[BookCase:<a  onClick="hide(2)"  style="cursor:hand">隱</a>|<a  onClick="show(2)"  style="cursor:hand">顯</a>]

<BR>
<TABLE  id="showTb"  name=  "showTb"  border=1>
<TR>
        <TD>11BookId</TD>
        <TD>12Hits</TD>
        <TD>13BookCase</TD>
        <TD>14BookS</TD>
        <TD>15Collect</TD>
</TR>
<TR>
        <TD>21</TD>
        <TD>22</TD>
        <TD>23</TD>
        <TD>24</TD>
        <TD>25</TD>
</TR>
<TR>
        <TD>31</TD>
        <TD>32</TD>
        <TD>33</TD>
        <TD>34</TD>
        <TD>35</TD>
</TR>
<TR>
        <TD>41</TD>
        <TD>42</TD>
        <TD>43</TD>
        <TD>44</TD>
        <TD>45</TD>
</TR>
</TABLE>


</BODY>

</HTML>

js實現隱藏列和顯示列