时间戳

首页 > 解决方案 > 为什么我尝试向表中添加新行（使用 oa 表元素制作）不断出现和消失？

javascript - 为什么我尝试向表中添加新行（使用 oa 表元素制作）不断出现和消失？

问题描述

我正在尝试用 Javascript 制作一个不使用table元素的表格，并且我使用的是纯 vanilla nodeJS。我可以让一个新行非常短暂地出现，但是当我点击让它首先出现的按钮时它就会消失。我的代码是：

<!DOCTYPE html>
<html>
<body>

<h1> Title Tests </h1>

<div id="Experiments">
    <form id="Exp">
        <input type="text" name="url box" placeholder="publisher URL"><br>

                <div class="Title">
                    <input type="text" name="title box" placeholder="Test Title"><br>
                </div>
                <button id="addButton" onclick="newRow()">+</button><br>

        <input type=submit value="Submit">
    </form>
</div>

<script>
    function newRow(){
        var number = 2;

        var newTitleRow = document.createElement('div');
        newTitleRow.setAttribute('id',`Title${number}`);

        var newBT = document.createElement('input');
        newBT.setAttribute('type','text');
        newBT.setAttribute('name',`title box ${number}`);
        newBT.setAttribute('placeholder','Test Title');

        newTitleRow.appendChild(newBT)

        var button = document.querySelector("#addButton");
        button.before(newTitleRow);

        number++;
    }
</script>   

</body>
</html>

标签： javascripthtmlnode.js

解决方案

问题是您在元素中使用了<button>html <form>。这意味着它将自动充当提交按钮，除非您将其声明为不同的东西。因此，只要您按下+按钮，它就会尝试将表单提交到未定义的 URL。

要解决此问题，您需要将该+按钮定义为“按钮”类型，例如：

<button type="button" id="addButton" onclick="newRow()">+</button><br>

推荐阅读