注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

清风幻影的博客

Where there is love, I will be there.

 
 
 

日志

 
 
关于我

同是天涯沦落人,相逢何必曾相识. 天生我材必有用,千金散尽还复来. 天若有情天亦老,人间正道是沧桑. 月影西斜人已去, 堤上梅花情依旧, 此情故已成追忆, 美人如玉夜留香

table 控制多行 显示与隐藏  

2011-09-22 19:58:02|  分类: html资料 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

开发过程中常遇到一个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"  //隐藏

  评论这张
 
阅读(1213)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018