返回首页
当前位置: 主页 > 网络编程 > Jsp实例教程 >

table中控制多行的显示和隐藏(tbody)

时间:2010-07-13 14:21来源:知行网www.zhixing123.cn 编辑:麦田守望者

开发过程中常遇到一个table中的一行或多行需要进行显示或隐藏控制。通常我们会想到给tr加个ID,这样做当然可以达要想要的效果,但重复代码太多,一般不用于多行的控制,对CSS有所了解的人这个时候就会想到用div来控制行了,但事实上,table中的div是只读的,它的style是不允许我们改变的,所以这个办法就失败了。所以最终的解决的办法是用tbody这个标签来实现div的效果。具体形式如下:

<table border="1" width="300">

<tbody id="tb1">

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

</tbody>

<tbody id="tb2" style="background-color:#eee;">

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

</tbody>

</table>

 

具体的控制语句是:document.all("tb1").style.display="" //显示

document.all("tb1").style.display="none" //隐藏
 

------分隔线----------------------------
标签(Tag):Javascript javascript教程 javascript特效 js特效
------分隔线----------------------------
推荐内容
猜你感兴趣