通過表格切換

Question

我目前有一個jQuery，它同時顯示4個表格，我怎樣才能讓它通過一個切換按鈕同時顯示一個表格？

我已經在下面顯示了我的部分代碼。任何幫助將非常感謝。

<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> 

Answer 1

假設它們都具有相同的類，這樣的事情應該工作

var $tables = $('.resultsTable');//cache table elements to avoid repeated dom searches 
$tables.not(':first').hide(); 

$('#someButton').click(function(){ 
    var $currTable = $tables.filter(':visible').hide(), 
     nextIndex = $tables.index($currTable) +1;   
    if(nextIndex === $tables.length){ 
     nextIndex = 0; 
    } 
    $tables.eq(nextIndex).show(); 
}); 

Answer 2

設置你的表顯示爲無。假設所有表都有類my_table將一個類（例如show）添加到應該顯示的類中，然後使用jQuery從當前類中刪除該類並將其添加到下一個表中。

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