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>

Answer 2

는 다음과 같은 UR JS을 변경하십시오 :

document.getElementById("datatable1").style.display = "block" //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 = "block" ; 
} 
else{ 
    document.getElementById("datatable1").style.display = "block" ; 
    document.getElementById("datatable2").style.display = "none"; 
} 
}