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"  //隐藏