隐藏所有行并显示所选行

时间:2014-07-06 15:52:27

标签: html css html-table

我需要隐藏所有行,然后显示所选行。 我的代码如下。这在除Internet Explorer之外的所有浏览器中都能正常工作。在IE中,所有行都被隐藏,没有显示任何内容。

任何帮助都将受到高度赞赏。

这是表定义的代码

<table id="tableID">
<thead>
<tr>
    <th>Product</th>
    <th>Price</th>
    <th>Destination</th>
    <th>Updated on</th>
</tr>
</thead>
<tbody>
<tr class="parent">
    <td>Oranges</td>
    <td>100</td>
    <td>22/10</td>
</tr>
<tr>
    <td></td>
    <td>120</td>
    <td>City 1</td>
    <td>22/10</td>
</tr>
</tbody>

这是CSS

    #tableID tbody tr {
    display : none;
     }


   #tableID tr.parent {
    display : table-row;
    color: blue;
     }

1 个答案:

答案 0 :(得分:0)

您的IE版本可能不支持display: table-row属性。所以不要尝试使用display:block

#tableID tr.parent {
    display : block;
    color: blue;
 }