使用JS添加表格行后立刻消失且控制台无报错问题求助

核心故障点 #

你代码中没有正确阻止表单的默认提交行为，导致页面在表单提交后自动刷新，新增的表格行随页面重置消失：

• 你的JS代码里写的是e.preventDefault，这只是获取了preventDefault方法的引用，没有调用执行，完全没有起到阻止默认行为的作用。修改为e.preventDefault()即可阻止表单提交刷新页面的逻辑。
• 表单默认提交刷新属于浏览器原生行为，没有语法错误所以控制台不会抛出任何报错信息，完全符合你遇到的现象。

次要可优化点（非必改，但能避免后续潜在问题） #

1. 第一个表格的表头标签书写错误，你写的<head>应该修正为<thead>，<head>是页面全局头部标签，不属于表格元素。
2. 直接将<form>作为<tr>的子元素不符合HTML规范，浏览器解析时可能自动调整DOM结构导致表单事件绑定失效，建议将表单包裹整个输入表格，或给提交按钮显式设置type="submit"保证兼容性。

修正后的完整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.reset();
    }   
    formel.addEventListener("submit", addRow)
</script>  

修改后点击添加按钮就不会触发页面刷新，新增的行可以正常保留。

内容的提问来源于stack exchange，提问作者user17285108