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

请更改以下内容：

  var counter = 5;
  $("#close-message").html("You can close this in " + counter + " seconds");  
  var setMsg = setInterval(function() {
    counter--;
    if(counter > 0) {
      $("#close-message").html("You can close this in " + counter + " seconds");
    } else {
      $( ".close" ).click(function() {
        $('#PopUp').css("visibility", "hidden"); 
        $('#PopUp').css("opacity", 0);
      });
      $("#close-message").remove();
      clearInterval(setMsg);
    }
  }, 1000);

Answer 2

这是一个有效的解决方案。希望它有所帮助！

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>

HTML：根据选择

2 个答案: