javascript - HTML:根据选择仅显示两个数据表中的一个

Question

我只想使用基于选择的 html + js 显示两个数据表中的一个(两个单选按钮)。

我尝试使用以下代码，但是当我单击单选按钮时没有任何反应。

HTML:

<form name="myForm">
              <input type="radio" name="table1" value="table1" onclick="handleClick(this);" checked> Quarter
              <input type="radio" name="table2" value="table2" onclick="handleClick(this);"> Month<br>              
</form>

JS:

   document.getElementById("datatable1").style.display = "";  //Show the table
    document.getElementById("datatable2").style.display = "none";  //Hide the table

function handleClick(myRadio) {
    if (myRadio.value == "table2"){
        document.getElementById("datatable1").style.display  = "none";
        document.getElementById("datatable2").style.display  = "";
    }
    else{
        document.getElementById("datatable1").style.display  = "";
        document.getElementById("datatable2").style.display  = "none";
    }
}

Answer 1

这是一个可行的解决方案。希望对您有帮助!

document.getElementById("datatable1").style.display = "";  //Show the table
    document.getElementById("datatable2").style.display = "none";  //Hide the table

    function handleClick(myRadio) {
        if (myRadio.value == "table2"){
            document.getElementById("datatable1").style.display  = "none";
            document.getElementById("datatable2").style.display  = "";
        }
        else{
            document.getElementById("datatable1").style.display  = "";
            document.getElementById("datatable2").style.display  = "none";
        }
    }

table{
        width: 80px;
        hight: 80px;
        border: 1px solid #000000;
    }

<form name="myForm">
    <input type="radio" name="table1" value="table1" onclick="handleClick(this);" checked> Quarter
    <input type="radio" name="table1" value="table2" onclick="handleClick(this);"> Month<br>
</form>

<table id="datatable1">
    <tr>
        <td>Table 1</td>
    </tr>
</table>
<table id="datatable2">
    <tr>
        <td>Table 2</td>
    </tr>
</table>