OnClick事件表不会正确触发

此代码旨在显示和隐藏基于点击按钮的表格，但是，它似乎无法正确切换。有谁知道我做错了什么？OnClick事件表不会正确触发

<body> 
    <br> 
     <button onclick="toggleTable();" style="position:absolute; top:130px; left:1000; width:200px; height:25px">3-D Model</button> 

    <br> 
</body> 

<script> 

    function toggleTable() 
{ 

var status = document.getElementById("modelTable").style.display; 

if (status == 'block') { 
    document.getElementById("modelTable").style.display="none"; 
} else { 
    document.getElementById("modelTable").style.display="block"; 
} 
} 

    <table id="modelTable" border="1" align="right" style="display:block; position:absolute; top:150px; left:1000;"> 
     <tr> 
      <th> 
       <a href="google.com"> 3-D Model </a> 
      </th> 
     </tr> 
     <tr> 
      <td> 
       <a>test1</a> 

      </td> 
     </tr> 
     <tr> 
      <td> 
       <a>test2</a> 
      </td> 
     </tr> 
    </table> 

</script>

来源

2013-11-28 user3044179

您的标记无效，您需要将标签放在主体内 –

'Java'是'JavaScript'，'Car'是'Carpet'。 –

您marksup是无效的，你需要把身体内的TABEL

<body> 
    <br/> 
    <button onclick="toggleTable();" style="position:absolute; top:130px; left:1000; width:200px; height:25px">3-D Model</button> 
    <br/> 
    <table id="modelTable" border="1" align="right" style="display:block; position:absolute; top:150px; left:1000;"> 
     <tr> 
      <th> <a href="google.com"> 3-D Model </a> 

      </th> 
     </tr> 
     <tr> 
      <td> <a>test1</a> 

      </td> 
     </tr> 
     <tr> 
      <td> <a>test2</a> 

      </td> 
     </tr> 
    </table> 
    <script> 
     function toggleTable() { 
      var table = document.getElementById("modelTable"); 
      var status = table.style.display; 
      if (status == 'block') { 
       table.style.display = "none"; 
      } else { 
       table.style.display = "block"; 
      } 
     } 
    </script> 
</body>

演示：Fiddle

来源

2013-11-28 03:09:22

在您的代码： VAR状态=的document.getElementById（ “modelTable”） .style.display; （status =='block'）{ document.getElementById（“modelTable”）。style.display =“none”; if（status =='block'）{ document.getElementById } else { document.getElementById（“modelTable”）.style.display =“block”; }

它可能是更好的使用CSS：

的CSS： .hide {显示：无; }

javascript： document.getElementById（'modelTable'）。classList.toggle（'hide'）;

来源

2013-11-28 03:21:26 nappySoft

OnClick事件表不会正确触发

回答

相关问题