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也会出现无数的如何做到这一点的例子。作为S.O.的一部分，您的问题将被关闭。行为准则规定，您必须至少花费很少的精力才能使事情顺利进行。

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

FIDDLE

javascript在表之间切换

2 个答案: