table 布局用slideToggle()展开和隐藏

来源:互联网 发布:淘宝直通车 医疗器械 编辑:程序博客网 时间:2024/05/21 09:56

<script src="../scripts/jquery-1.3.1.js"></script>

<script>

//展开、隐藏代码
    $(function(){
        $("tr.parent").click(function() {
            $(this).toggleClass('selected');
            $(this).siblings('.child_' + this.id).slideToggle();
        });
    })
</script>

<table>
    <thead>
        <tr><th>姓名</th><th>性别</th></tr>
    </thead>
    <tbody>
        <tr class="parent" id="row_01"><td colspan="3">设计组</td></tr>
        <tr class="child_row_01"><td>张山</td><td>男</td></tr>
        <tr class="child_row_01"><td>李四</td><td>女</td></tr>

        <tr class="parent" id="row_02"><td colspan="3">美术组</td></tr>
        <tr class="child_row_02"><td>王五</td><td>男</td></tr>
        <tr class="child_row_02"><td>找六</td><td>男</td></tr>

        <tr class="parent" id="row_03"><td colspan="3">开发组</td></tr>
        <tr class="child_row_03"><td>Rain</td><td>男</td></tr>
        <tr class="child_row_03"><td>MAXMAN</td><td>女</td></tr>
    </tbody>
</table>

0 0
原创粉丝点击