Question

我有PHP生成的简单表。

<table border="1" id="control>
    <tbody>
        <tr>...</tr>
        <tr>...</tr>
        <tr>...</tr>  //Row #3
        <tr>...</tr>
        <tr>...</tr>
        <tr>...</tr>
    </tbody>
</table>

我想在使用javascript或css加载页面时隐藏第3行。如果没有给出第3行ID，有没有办法做到这一点？

提前谢谢

Answer 1

使用jquery非常简单，$('#control tr:eq(2)').hide()

Answer 2

使用css3，您可以使用：nth-child选择器

#control tr:nth-child(3)
{
   display:none;
}

Answer 3

试试这个

 document.getElementsByTagName("tr")[2].style.display = 'none';

Answer 4

使用纯JavaScript（没有类似JQuery等框架）可以做到：

<!DOCTYPE html>
<html>
<head>
    <title>HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <table border="1" id="control">
        <tbody>
            <tr><td>row1</td></tr>
            <tr><td>row2</td></tr>
            <tr><td>row3</td></tr>
            <tr><td>row4</td></tr>
            <tr><td>row5</td></tr>
            <tr><td>row6</td></tr>
        </tbody>
    </table>
    <script type="text/javascript">
        var tableElm = document.getElementById("control");
        var tableChilds = tableElm.getElementsByTagName("tr");
        var row3 = tableChilds[2];
        row3.style.display = "none";
        // alternatively:
        //row3.style.visibility = "hidden";
    </script>
</body>
</html>

Answer 5

使用jQuery＆＃39; s eq(int)选择基于零的索引处的行：

$("#control tr").eq(2).hide();

从没有ID的表中隐藏特定行

5 个答案: