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

Question

我有下表，我想将display 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

最简单的方法是使用css伪元素：

• el:first-child：选择el - 元素作为其父元素的第一个子元素。 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*/ }

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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 3

使用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>

Answer 4

只需将其替换为

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