桌面之間的javascript切換

Question

我有兩個表格顯示不同的數據，頁面頂部有兩個按鈕。當你點擊一個按鈕時，我希望它顯示錶A的數據，當你點擊另一個按鈕時，我希望它隱藏表A，並在表B中顯示數據。兩個表的默認視圖都設置爲在頁面加載時隱藏，僅在單擊每個按鈕時顯示。什麼是JavaScript的功能，使這發生？

Answer 1

Plain JS。

<table border="1" id="tableA"> 
    <tr> 
     <td>cell 1</td> 
     <td>cell 2</td> 
    </tr> 
    <tr> 
     <td>cell 3</td> 
     <td>cell 4</td> 
    </tr> 
</table> 
<table border="1" id="tableB"> 
    <tr> 
     <td>cell 5</td> 
     <td>cell 6</td> 
    </tr> 
    <tr> 
     <td>cell 7</td> 
     <td>cell 8</td> 
    </tr> 
</table> 
<input type="button" id="showTableA" value="Table A"> 
<input type="button" id="showTableB" value="Table B"> 

 

var tableA = document.getElementById("tableA"); 
var tableB = document.getElementById("tableB"); 

var btnTabA = document.getElementById("showTableA"); 
var btnTabB = document.getElementById("showTableB"); 

btnTabA.onclick = function() { 
    tableA.style.display = "table"; 
    tableB.style.display = "none"; 
} 
btnTabB.onclick = function() { 
    tableA.style.display = "none"; 
    tableB.style.display = "table"; 
} 

FIDDLE

Answer 2

假設的jQuery：

(function($) { 

    $(function() { 
     var tableA = $('#tableA'), 
      tableB = $('#tableB'), 
      buttonA = $('#buttonA'), 
      buttonB = $('#buttonB'); 

     buttonA.click(function() { 
      tableA.show(); 
      tableB.hide(); 
     }); 

     buttonB.click(function() { 
      tableA.hide(); 
      tableB.show(); 
     }); 
    }); 

})(jQuery); 

沒有違法，但即使是一個非常粗略的搜索谷歌或堆棧溢出會轉動起來的如何做到這一點的例子不勝枚舉。作爲S.O.的一部分，你的問題可能會被封閉。行爲準則規定，您必須至少表現出儘可能少的努力才能使事情順利進行。