javascript - テーブル間のJavaScriptトグル

Question

異なるデータを表示する 2 つのテーブルがあり、ページの上部に 2 つのボタンがあります。1 つのボタンをクリックするとテーブル A のデータが表示され、もう 1 つのボタンをクリックするとテーブル A が非表示になり、テーブル B のデータが表示されます。両方のテーブルの既定のビューは次のように設定されています。ページの読み込み時に非表示になり、各ボタンがクリックされたときにのみ表示されます。これを実現するJavaScript関数は何ですか?

Answer 1

プレーン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";
}

フィドル

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

問題はありませんが、Google や Stack Overflow をざっと検索しただけでも、これを行う方法の無数の例が見つかります。SO の行動規範の一部では、物事を機能させるために少なくとも最小限の努力を示さなければならないと述べているため、質問はクローズされる可能性があります。