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>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)選擇最后三個孩子以獲取更多信息

倒數第二個孩子如何工作

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

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

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

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