CSS隐藏表并显示tr

时间:2012-10-25 19:57:16

标签: javascript css visibility css-tables

我想在加载时隐藏一个表,并根据类名显示其中一个子项td。 可以用CSS做到吗?

我试图这样做,但我认为它继承自display:none;

隐藏的表

3 个答案:

答案 0 :(得分:5)

您无法展示隐藏父母的孩子。

但是,您可以隐藏所有其他<td> - 并显示您需要的那个。

<style>
td { display: none }
td.shown { display: table-cell }
</style>

<table>
    <tr>
        <td> hidden </td>
        <td> hidden </td>
    </tr>
    <tr>
        <td class="shown"> shown </td>
        <td> hidden </td>
    </tr>
    <tr>
        <td> hidden </td>
        <td> hidden </td>
    </tr>
</table>

DEMO


<强>更新

使用JavaScript

var tds = document.getElementsByTagName("td");

for ( var i = 0, size = tds.length; i < size; i++ ) {
    if ( !hasClass( tds[i], "shown" ) ) {
        tds[i].style.display = "none";
    }
}

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

DEMO

hasClass()功能

答案 1 :(得分:4)

如果隐藏表格,表格中的所有内容都将被隐藏。

您想要隐藏所有<tr>并且只显示每个类

tr{
  display:none;
}
tr.showInit{
  display:table-row;
}

答案 2 :(得分:1)

您无法显示孩子并隐藏 ..这是不可能的。

而是隐藏您不想显示的所有 td的 ..