Question

我有这个小桌子，我想用一个简单的按钮隐藏一些细节...让我们说，

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid gray;
  padding: 5px 10px;
}

<button>Show/Hide Details</button>

<table>
  <thead>
    <th>No</th>
    <th>Full Name</th>
    <th>Nickname</th>
    <th>Age</th>
    <th>Gender</th>
    <th>Email</th>
    <th>Phone</th>
    <th>Address</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Revan D. Cole</td>
      <td>Revan</td>
      <td>22</td>
      <td>Male</td>
      <td>revan.dcole@domain.com</td>
      <td>(+1) 123 123</td>
      <td>D Cole Street</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Mira Rosenfield</td>
      <td>Mira</td>
      <td>21</td>
      <td>Female</td>
      <td>mira.rosenfield@domain.com</td>
      <td>(+2) 234 234</td>
      <td>Rose Street</td>
    </tr>
  </tbody>
</table>

我想在点击按钮时隐藏此电子邮件，电话和地址字段，如果我们点击它，它会再次显示详细信息。

Answer 1

执行此操作的正确方法是为要切换的所有信息指定一个类。这确实使解决方案变得简单。

我已在此示例中指定了一个类sensitive，并在单击该按钮时将其切换。

$("button").click(function() {
  $(".sensitive").toggle();
})

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid gray;
  padding: 5px 10px;
}

.sensitive {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Show/Hide Details</button>

<table>
  <thead>
    <th>No</th>
    <th>Full Name</th>
    <th>Nickname</th>
    <th>Age</th>
    <th>Gender</th>
    <th class="sensitive">Email</th>
    <th class="sensitive">Phone</th>
    <th class="sensitive">Address</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Revan D. Cole</td>
      <td>Revan</td>
      <td>22</td>
      <td>Male</td>
      <td class="sensitive">revan.dcole@domain.com</td>
      <td class="sensitive">(+1) 123 123</td>
      <td class="sensitive">D Cole Street</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Mira Rosenfield</td>
      <td>Mira</td>
      <td>21</td>
      <td>Female</td>
      <td class="sensitive">mira.rosenfield@domain.com</td>
      <td class="sensitive">(+2) 234 234</td>
      <td class="sensitive">Rose Street</td>
    </tr>
  </tbody>
</table>

Answer 2

您想要隐藏td and th的最后三个孩子，您可以按nth-last-child(-n+3) for more info

选择最后三个孩子

n-last-child如何工作

(-n+3)....
 -1+3 = 2  --> nth-last-child(2)
 -2+3 = 1  --> nth-last-child(1)
 -3+3 = 0  --> nth-last-child(0)

＆＃13;

$("button").click(function () {
  $("tr td:nth-last-child(-n+3),th:nth-last-child(-n+3)").toggle();
});

＆＃13;

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid gray;
  padding: 5px 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Show/Hide Details</button>

<table>
  <thead>
    <th>No</th>
    <th>Full Name</th>
    <th>Nickname</th>
    <th>Age</th>
    <th>Gender</th>
    <th>Email</th>
    <th>Phone</th>
    <th>Address</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Revan D. Cole</td>
      <td>Revan</td>
      <td>22</td>
      <td>Male</td>
      <td>revan.dcole@domain.com</td>
      <td>(+1) 123 123</td>
      <td>D Cole Street</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Mira Rosenfield</td>
      <td>Mira</td>
      <td>21</td>
      <td>Female</td>
      <td>mira.rosenfield@domain.com</td>
      <td>(+2) 234 234</td>
      <td>Rose Street</td>
    </tr>
  </tbody>
</table>

＆＃13;

jQuery显示/隐藏多个表列

2 个答案: