javascript - OnClick 事件表无法正确触发

标签 javascript html 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>

最佳答案

您的标记无效,您需要将表格放在正文中

<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

关于javascript - OnClick 事件表无法正确触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20256957/

相关文章:

javascript - jQuery UI - 多个动态生成的 slider 和每个更改的功能

javascript - 三、ExplodeModifier 黑客攻击

javascript - 拖放时清除 jQuery data()

java - 在 Android 中设置微调器 onClickListener()

c# - 按下回车键时调用特定按钮的onClick事件C#

javascript - FabricJS:大网格对象模糊

javascript - 在文本输入时动态更新字典

jquery在点击事件上跳转到顶部,返回false或prevenDefault不起作用

javascript - JQuery显示/隐藏避免多个组中的冲突

javascript - 当目光移开时刷新 iframe(从 iframe 本身内部)