Question

我正在使用一个表，因为我从数据库中提取了大量数据 - 因此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>fderf@derf.com</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>tuser@user.com</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>ffreep@bugsco.com</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>brubble@bedrock.gov</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>

Answer 1

请看下面的小提琴手解决方案

 .class1 > div > .class2 {
        //attributes goes here   
    }

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

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

1 个答案: