0

我是 Javascript 和 CSS 的新手，我尝试使用 JavaScript 展开/折叠表格行。

而且，我使用 CSS 来更改表格的样式。

这是我的代码片段：

<html>
    <head>
        <script>
            function ShowSubTable(titleRow)
            {    
                var nextRow = titleRow.nextSibling;
                while (nextRow != null)
                {
                    if( nextRow.tagName != 'TR' ){
                        nextRow = nextRow.nextSibling;
                        continue;
                    }
                    if (nextRow.style.display == 'none')
                    {
                        nextRow.style.display = 'block';
                    }
                    else
                    {
                        nextRow.style.display = 'none';
                    }
                    break;
                }        
            }
        </script>
        <style>
            table.tlb
            {
                width: 100%;
            }
            table.tlb th
            {
                background: #E8C993;
                font-size: 22px;
            }
            table.tlb td
            {
                background: #FFEAAF;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <table class="tlb">
            <tr onclick="ShowSubTable(this)">
                <th>abc</th>
            </tr>
            <tr>
                <td>123</td>
            </tr>
            <tr onclick="ShowSubTable(this)">
                <th>def</th>
            </tr>
            <tr>
                <td>456</td>
            </tr>
        </table>
    </body>
</html>

展开/折叠功能工作正常。但有一个问题。

我的桌子的宽度在开始时是 100%。但是，在我折叠表格行并展开它之后。表格行的宽度不是 100%。

如何解决问题？

提前致谢。

4

1 回答 1

2

tr显示元素时应该只恢复默认显示值

nextRow.style.display = 'table-row';

代替

nextRow.style.display = 'block';
于 2013-10-02T16:25:09.603 回答