表示を設定しない方法2番目のTrの最初のTdに

Question

私は以下の表を持っています。私はvisiと呼ばれる2番目の行の最初のtdにdisplay noneを設定します。これどうやってするの ？

.visi{ background:orange}

<table border="1" cellpadding="1"> 
 
<tr> 
 
<td class="visi" rowspan="2">__</td> 
 
<td>1</td> 
 
</tr> 
 
<tr> 
 
<td class="visi" rowspan="2">__</td> 
 
<td>2</td> 
 
</tr> 
 
</table>

Answer 1

easyest方法はCSS擬似エレメントを使用することです：

• el:first-child：それの親の最初の子であるel -elementを選択します。 https://www.w3schools.com/cssref/sel_firstchild.asp
• el:nth-child(number)：n番目のel - その親の要素を選択します。

https://www.w3schools.com/cssref/sel_nth-child.aspは、この二つが取得する参加：

table tr:nth-child(2) > td:first-child { /* your style*/ } 

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

<table border="1" cellpadding="1"> 
 
<tr> 
 
<td class="visi" rowspan="2">__</td> 
 
<td>1</td> 
 
</tr> 
 
<tr> 
 
<td class="visi" rowspan="2">__</td> 
 
<td>2</td> 
 
</tr> 
 
</table>

Answer 2

ちょうどこの

<td class="visi" style="display:none;" rowspan="2">__</td> 

Answer 3

tr:nth-child(2)に置き換える第二trを選択します。 td:nth-child(1)は、第1のtdを選択します。

.visi{ background:orange} 
 

 
tr:nth-child(2)>td:nth-child(1) { 
 
    display: none; 
 
}

<table border="1" cellpadding="1"> 
 

 
<tr> 
 
<td class="visi" rowspan="2">__</td> 
 
<td>1</td> 
 
</tr> 
 

 
<tr> 
 
<td class="visi" rowspan="2">__</td> 
 
<td>2</td> 
 
</tr> 
 

 
</table>

Answer 4

使用findとeq方法とaddClassがあなたの要素を非表示にします。

$('table').find('tr').eq(1).find('td').eq(0).addClass('hide');

.visi { 
 
    background: orange 
 
} 
 
.hide 
 
{ 
 
    display:none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1" cellpadding="1"> 
 
    <tr> 
 
    <td class="visi" rowspan="2">__</td> 
 
    <td>1</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="visi" rowspan="2">__</td> 
 
    <td>2</td> 
 
    </tr> 
 
</table>