如何展开/折叠动态表行数据

Question

我正在从servlet中获取一些数据，并使用迭代将其显示在Jsp中作为表格。现在，我想根据行数据项分别扩展/折叠每行。 我正在使用ajax cal获得这些数据，但是代表问题所在

    </script>
<script type= "text/javascript">
    $(document).ready(function(){
        $('tr.parent').css("cursor","pointer")
        .attr("title","click to expand/collapse")
        .click(function(){
            $(this).siblings('.child-'+this.id).toggle();
        });
        $('tr[@class^=child-]').hide.children('td');
    });
</script>

        <div class="container">
        <table class="table table-striped" >
            <tr>
            <th>Request ID</th>
            <th>User ID</th>
            <th>Login URL</th>
            <th>Reason</th>
        </tr>
        <c:forEach items="${Env}" var="col">
        <tr class="parent" id="env">
            <td><a class="value" data-toggle="collapse" data-target="#details" href="./envDetails?envId=${col.environmentid }"><span class="glyphicon glyphicon-collapse-down"></span>${col.environmentid }</a></td>
            <td>${col.userid }</td>
            <td>${col.loginURL }</td>
            <td>${col.reason }</td>
        </tr>
    <tr id="details" class="child-env" style="display: table-row;">
            <table>
            <tr>
                <th>Script Name</th>
                <th>Module</th>
                <th>Type</th>
                <th>Status</th>
            </tr>
            </table>
         </tr>
    </table>
    </div>

每当展开该行时，其显示必须如下所示

    <tr>
        <th>Script Name</th>
        <th>Module</th>
        <th>Type</th>
        <th>Status</th>
    </tr>