0
点赞
收藏
分享

微信扫一扫

table 控制多行 显示与隐藏


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

举报

相关推荐

0 条评论