javascript - jQuery 显示/隐藏多个表格列

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>[e-mail]</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>[e-mail]</td>
      <td>(+2) 234 234</td>
      <td>Rose Street</td>
    </tr>
  </tbody>
</table>

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

标签： javascriptjqueryhtml

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">[e-mail]</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">[e-mail]</td>
      <td class="sensitive">(+2) 234 234</td>
      <td class="sensitive">Rose Street</td>
    </tr>
  </tbody>
</table>