绷表行 - 如何关闭所有打开的行

我的工作有一张桌子，因为我从数据库中提取大量的数据 - 因此多了很多行，在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

欢迎您 –

绷表行 - 如何关闭所有打开的行

回答

相关问题