切换表格

时间:2015-04-28 20:23:59

标签: javascript jquery toggle

我目前有一个同时显示4个表的jQuery,如何通过切换按钮一次显示1个表?

我在下面显示了部分代码。任何帮助都会非常感谢。

    <script type="text/javascript">
     function call_everybody(){                                 
        display_cyclist_results_table();
        display_cyclist2_results_table();
        display_cyclist3_results_table();
        display_cyclist4_results_table();
        cyclist_heading();
    }
 </script>

    <table class="resultsTable" align="center"> 
            <tr><td class="tdCells"><div id="cyclist_table"></div></td>
                <td class="tdCells"><div id="cyclist2_table"></div></td>
                <td class="tdCells"><div id="cyclist3_table"></div></td>
                <td class="tdCells"><div id="cyclist4_table"></div></td></tr>
    </table>

2 个答案:

答案 0 :(得分:0)

假设他们都有相同的课程,这样的事情应该有效

return [
    'zf-rest' => [
        'Portfolio\\V2\\Rest\\Project\\Controller' => [
            // other config
            'entity_class' => 'Portfolio\\V2\\Rest\\Project\\ProjectEntity',
            'collection_class' => 'Portfolio\\V2\\Rest\\Project\\ProjectCollection',
        ]
    ],
    'zf-hal' => [
        'metadata_map' => [
            'Portfolio\\V2\\Rest\\Project\\ProjectEntity' => [
                // other config
                'hydrator' => 'MyNamespace\\Hydrator\\ProjectHydrator'
            ],
            'Portfolio\\V2\\Rest\\Project\\ProjectCollection' => [
                // other config
                'hydrator' => 'MyNamespace\\Hydrator\\ProjectCollectionHydrator'
            ]
        ]
    ]
]

答案 1 :(得分:-1)

设置表格&#39;显示为无。假设所有表都有类my_table将一个类(例如show)添加到应该显示的类中,然后使用jQuery从当前删除该类并将其添加到下一个表中。 / p>

<强> CSS:

.my_table {
    display: none;
}
.my_table.show {
    display: table;
}

<强> jQuery的:

var tblNum = 0;
var tblTotal = $('#table_container .my_table').length;
$("#toggle_table").on('click', function() {
    $('#table_container .my_table').removeClass('show');
    tblNum++;
    if(tblNum >= tblTotal)
        tblNum = 0;
    $('#table_container .my_table').eq(tblNum).addClass('show');
});

jsfiddle DEMO