gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 05:13:46 26 4
gpt4 key购买 nike

我有一张小 table ,我想用一个简单的按钮隐藏一些细节......让我们说,

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>

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

最佳答案

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

我在这个例子中分配了一个类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>

关于javascript - jQuery 显示/隐藏多个表列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50342303/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com