表中的行显示并消失

时间:2015-03-07 15:08:46

标签: javascript html asp.net

当我点击按钮时,行将在不到一秒的时间内显示并消失。当我删除表单标签时,一切都会好的。为什么?我该怎么做不必删除表格标签?

这是代码

<html>
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="myTable">
          <tr>
            <td>Row1 cell1</td>
            <td>Row1 cell2</td>
          </tr>
          <tr>
            <td>Row2 cell1</td>
            <td>Row2 cell2</td>
          </tr>
          <tr>
            <td>Row3 cell1</td>
            <td>Row3 cell2</td>
          </tr>
        </table>
        <br>

        <button onclick="myFunction()">Try it</button>

        <script>
        function myFunction() {
            var table = document.getElementById("myTable");
            var row = table.insertRow(0);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = "NEW CELL1";
            cell2.innerHTML = "NEW CELL2";
        }
        </script>
    </div>
    </form>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

您的按钮会导致您的页面提交,并在没有新行的情况下刷新页面。

尝试:

<button onclick="myFunction(); return false;">Try it</button>

阻止提交(Fiddle)。