javascript - javascript 在表格之间切换

Question

我有两个表格显示不同的数据，页面顶部有两个按钮。当您单击一个按钮时，我希望它显示表 A 的数据，当您单击另一个按钮时，我希望它隐藏表 A，并显示表 B 中的数据。两个表的默认视图都设置为在页面加载时隐藏，仅在单击每个按钮时显示。实现这一点的 javascript 函数是什么？

Answer 1

假设 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 行为准则的一部分规定您必须至少付出最少的努力才能使事情正常进行。

Answer 2

纯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";
}

小提琴