javascript - Div 元素仅出现几秒钟

Question

我试图在单击表单中的提交按钮时显示一个表格。我正在使用 JavaScript 来实现该功能。请参阅下面的代码:

<script type="text/javascript">
    function showTable1234() {
        var showtab = document.getElementsByClassName('container12');
        for(var i =0;i !=showtab.length;i++)
            showtab[i].style.display = 'block';
    }
</script>

这是调用上述函数的按钮的代码:

<button type="submit" class="btn btn-primary btn-block" onclick="showTable1234()">Submit</button>

这是单击提交按钮时显示的 div 元素:

<div class="container12" >
    <h2>Hover Rows</h2>           
    <table class="table table-hover" id = "tab12">
        <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                .....

现在，只要我在 Chrome 浏览器上运行代码并单击提交按钮，表格就仅可见，但仅持续一小秒或其他时间，然后表格就消失了。当我单击“提交”按钮时，它会再次出现，但再次出现的时间相同。

我什至尝试过使用这段代码，但结果相同

<script type="text/javascript">
    function showTable1234() {
        var showtab = document.getElementsByClassName('container12')[0];
        for(var i =0;i !=showtab.length;i++)
            showtab[i].style.display = 'block';
    }
</script>

但是为此我收到了这个错误

Uncaught TypeError: Cannot read property 'style' of undefined
    at showTable1234 

提前感谢您的帮助。

Answer 1

更改此行:

<button type="submit" class="btn btn-primary btn-block" onclick="showTable1234()">Submit</button>

进入此内容，您的问题应该得到解决:

<button type="button" class="btn btn-primary btn-block" onclick="showTable1234()">Submit</button>