我用 JS 添加了一行，但是 seconds/miliseconds 之后它立即被删除，控制台日志也没有显示错误

Question

所以，我做了两个table，一个table里面有一个表格，你可以在那个表格里输入你想要的任何东西，然后它就会显示在另一个table.

          <table>
                <head>
                     <tr>
                        <th>Product Name</th>
                        <th>Product Price</th>
                        <th>Product Quantity</th>
                        <th>Product Barcode</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <form id="input">
                            <td><input class="userinput" id="productname" type="text" placeholder="Product Name"></td> 
                            <td><input class="userinput" id="productprice" type="text" placeholder="Product Price"></td>
                            <td><input class="userinput" id="productquantity" type="number" placeholder="Product Quantity"></td>
                            <td><input class="userinput" id="productcode" type="number" placeholder="Product Barcode"></td>
                            <td><button>Add Products</button></td>
                        </form>
                    </tr>
                </tbody>
            </table>

用户将在此 table 中输入数据，数据将显示在 table 2 中，即：

<table id="products">
                <thead>
                    <tr>
                        <th>Product Name</th>
                        <th>Product Price</th>
                        <th>Product Quantity</th>
                        <th>Product Barcode</th>
                    </tr>
                </thead>
                <tbody id="plist">
                    <tr>
                        <td> product name 1</td>
                        <td>product price 1</td>
                        <td>product quantity 1</td>
                        <td>product bardcode 1</td>
                    </tr>
                </tbody>
            </table>

这里使用的JS代码是：

<script>
    const formel = document.querySelector('#input');
    const tableel=document.querySelector('#plist');
    function addRow(e){
    e.preventDefault;
    const pname = document.getElementById('productname').value;
    const pprice = document.getElementById('productprice').value;
    const pquan = document.getElementById('productquantity').value;
    const pcode = document.getElementById('productcode').value;
    tableel.innerHTML+= `
    <tr>
        <td>${pname}</td>
        <td>${pprice}</td>
        <td>${pquan}</td>
        <td>${pcode}</td>
    </tr>
    `;
}   
formel.addEventListener("submit", addRow)
</script>

项目添加了几个 seconds/millions，立即被删除。我尝试检查控制台，它没有显示任何错误。

我是javascript的新手，老实说，我通过观看各种YouTube视频获得了js代码，但我不明白为什么table行添加后立即被删除。

如果有人提供帮助，那将非常有帮助，在此先感谢您。

Answer 1

由于preventDefault是一个方法，所以需要将e.preventDefault改为e.preventDefault();。

参考：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Answer 2

因为您还没有调用 e.preventDefault，点击 添加产品 按钮发出请求并将表单的数据发送到服务器，然后它会显示该请求的响应 (这没什么）结果几毫秒后你只能看到一个空白页面。要解决此问题，您需要将 e.preventDefault 更改为 e.preventDefault() 并且此更改会阻止提交表单。

我用 JS 添加了一行，但是 seconds/miliseconds 之后它立即被删除，控制台日志也没有显示错误

I added a row using JS, but it gets immediately deleted after a few seconds/miliseconds, the console log also shows no error

javascript

html

css

html-table

tr