如何设置显示无第二个Tr的第一个Td

Question

我有下表，我想设置显示none到第二个第二个行的td，即所谓的visi。我怎样才能做到这一点 ？

.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 - 元素是它的第一个孩子的父母。 https://www.w3schools.com/cssref/sel_firstchild.asp
• el:nth-child(number)：选择第n个el -element它的父项。 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)选择第一个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>