1

私は1つのテーブルを持っています

<table>
<tr><td>test data 1</td></tr>
<tr><td>test data 2</td></tr>
<tr><td>test data 3</td></tr>
<tr><td>test data 4</td></tr>
<tr><td>test data 5</td></tr>
</table>

テーブルの2行目を非表示にするために、次のcssを使用しています

 table tr:nth-child(2) {display : none;}

ただし、すべてのブラウザで機能するわけではありません。私を助けてください。前もって感謝します。

4

5 に答える 5

6

隣接セレクターを使用します。

table tr:FIRST-CHILD + tr
{
    display:none;
}
于 2012-08-03T09:06:20.587 に答える
5

:nth-child()CSS2を使用して 2 行目を非表示にする場合は、特定のクラスを追加できます。

<table>
<tr><td>test data 1</td></tr>
<tr class="row2"><td>test data 2</td></tr>
<tr><td>test data 3</td></tr>
<tr><td>test data 4</td></tr>
<tr><td>test data 5</td></tr>
</table>

 table tr.row2 {display : none;}
于 2012-08-03T09:05:59.923 に答える
2

最良の方法は、クラス名を付けることです。

<table>
<tr><td>test data 1</td></tr>
<tr class="hide_me"><td>test data 2</td></tr>
<tr><td>test data 3</td></tr>
<tr><td>test data 4</td></tr>
<tr><td>test data 5</td></tr>
</table>

その後

.hide_me { display: none; }
于 2012-08-03T09:06:01.933 に答える
2

http://jsfiddle.net/p2b8H/1/

Jquery eq(1) を使用すると、0=> 1 行目、1 => 2 行目、2=> 3 行目などのようになります。

$(document).ready(function (){
    $('table tr:eq(1)').remove();
})
于 2012-08-03T09:21:08.870 に答える
0

残念ながら、 のようなセレクター:nth-child()は古いブラウザーではサポートされていません。

ただし、いつでもクラスを使用できます。たとえば、非表示にするクラスに.invisible {display:none}適用できます<tr>。

<table>
<tr><td>test data 1</td></tr>
<tr class="invisible"><td>test data 2</td></tr>
<tr><td>test data 3</td></tr>
<tr><td>test data 4</td></tr>
<tr><td>test data 5</td></tr>
</table>
于 2012-08-03T09:07:06.840 に答える