繃錶行 - 如何關閉所有打開的行

我的工作有一張桌子，因爲我從數據庫中提取大量的數據 - 因此多了很多行，在fiddle demo少數。我的目的是展示在一個可見行的一些基本信息，而隱藏在另一行更詳細的信息。點擊「更多」鏈接，隱藏的行與附加數據變得可見。繃錶行 - 如何關閉所有打開的行

我有隱藏的行切換正常，但真正要打開只有一行，並關閉其他人 - 和我停留在如何實現這一目標。我一直在尋找不同的例子了一會兒，一直沒能成功整合東西，我發現到我的代碼，並可以使用一些幫助。

非常感謝提前。正如前面提到的 - fiddle demo和下面的代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
     table.tctAdmin, .tctAdmin tr th {font-family:arial;font-size:9pt;border:1px solid #aaa;border-collapse:collapse;} 
     .tctAdmin tr td {border:1px solid #ccc;border-collapse:collapse;} 
     .tctAdmin tr th {font-size:1.1em;background-color:#ccc;} 
     .tctAdmin tr td {padding:2px 5px 0 5px;} 
     .tctAdmin tr td:nth-child(1) {width:17%;} 
     .tctAdmin tr td:nth-child(2) {width:13%;} 
     .tctAdmin tr td:nth-child(3) {width:13%;} 
     .tctAdmin tr td:nth-child(4) {width:22%;} 
     .tctAdmin tr td:nth-child(5) {width:16%;} 
     .tctAdmin tr td:nth-child(6) {width:5%;} 
    </style> 
</head> 
<body> 
<table cellpadding="0" cellspacing="0" class="tctAdmin"> 
    <tr> 
     <th>Register Date</th> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Email Address</th> 
     <th>Email Sent</th> 
     <th></th> 
    </tr> 
    <tr> 
     <td>1/2/2015</td> 
     <td>Fred</td> 
     <td>Derf</td> 
     <td>[email protected]</td> 
     <td>1/2/2015</td> 
     <td><a href="#" class="editRecord">More</a></td> 
    </tr> 
    <tr id="tcm0" class="record"> 
     <td colspan="8">test 0</td> 
    </tr> 
    <tr> 
     <td>1/3/2015</td> 
     <td>Test</td> 
     <td>User</td> 
     <td>[email protected]</td> 
     <td>1/3/2015</td> 
     <td><a href="#" class="editRecord">More</a></td> 
    </tr> 
    <tr id="tcm1" class="record"> 
     <td colspan="8">test 1</td> 
    </tr> 
    <tr> 
     <td>1/7/2015</td> 
     <td>Fearless</td> 
     <td>Freep</td> 
     <td>[email protected]</td> 
     <td>1/7/2015</td> 
     <td><a href="#" class="editRecord">More</a></td> 
    </tr> 
    <tr id="tcm2" class="record"> 
     <td colspan="8">test 2</td> 
    </tr> 
    <tr> 
     <td>1/12/2015</td> 
     <td>Barney</td> 
     <td>Rubble</td> 
     <td>[email protected]</td> 
     <td>1/12/2015</td> 
     <td><a href="#" class="editRecord">More</a></td> 
    </tr> 
    <tr id="tcm3" class="record"> 
     <td colspan="8">test 3</td> 
    </tr> 
</table> 

<script src="//code.jquery.com/jquery-latest.min.js" ></script> 
<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function(){ 
     $('.record').hide(); 
     $('a.editRecord').click(function() { 
      $(this).closest('tr').nextUntil(":not(.record)").toggle('slow'); 
      e.preventDefault(); 
     }); 
    }); 
</script> 
    </body> 
</html>

來源

2015-10-18 43rdworld

只需添加'$隱藏（）'（ '記錄'）。點擊功能和電子回調'函數（E）' –

請看看下面的提琴手解決方案

$('.record').hide(); 
$('a.editRecord').click(function(e) { 
    e.preventDefault(); 
    $('.record').hide(); 
    $(this).closest('tr').nextUntil(":not(.record)").toggle('slow');     
});

http://jsfiddle.net/8tv7rodL/11/

來源

2015-10-18 07:03:32

歡迎您 –

繃錶行 - 如何關閉所有打開的行

回答

相關問題