Question

我创建了这个html表单。

<form id="formu">
    <label for="n" >First Name : </label><input type="text" id="n"/><br/>
    <label for="p" >Last Name : </label><input type="text" id="p"/><br/>
    <button type="submit">Save</button>
</form>

提交表单时，我想将用户提供的信息添加到表中。表格代码是：

<table id="tab" border="1">
        <tr>
            <td>Id</td>
            <td>Last Name</td>
            <td>First Name</td>
        </tr>
</table>

这是表单提交的JavaScript代码

<script type="text/javascript">
        var fo = document.getElementById("formu");


        fo.addEventListener("submit",function()
        {
            var tab=document.getElementById("tab");

            var lign = tab.insertRow();

            var id1 = lign.insertCell(0);

            var nom = lign.insertCell(1);

            var prenom = lign.insertCell(2);

            id1.innerHTML="1";
            nom.innerHTML=document.getElementById("n").value;
            prenom.innerHTML=document.getElementById("p").value;

        });

</script>

但是一旦提交了表单，提交的数据就会显示在tbale中，并在之后消失。

Answer 1

当您按下提交按钮时表单提交，因此它有效地刷新表单，您可以添加onsubmit =“return false;”到表单标签以进行快速修复

Answer 2

数据消失的原因是，通过使用标准格式，页面将在表单提交给自身时刷新。

为防止这种情况发生，您需要在函数中使用preventDefault()，例如：

fo.addEventListener("submit",function(e)
    {
        e.preventDefault();
        var tab=document.getElementById("tab");

        var lign = tab.insertRow();

        var id1 = lign.insertCell(0);

        var nom = lign.insertCell(1);

        var prenom = lign.insertCell(2);

        id1.innerHTML="1";
        nom.innerHTML=document.getElementById("n").value;
        prenom.innerHTML=document.getElementById("p").value;

    });

Answer 3

试试这个： -

var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

// Insert a row in the table at the last row
var newRow   = tableRef.insertRow(tableRef.rows.length);

// Insert a cell in the row at index 0
var newCell  = newRow.insertCell(0);

// Append a text node to the cell
var newText  = document.createTextNode('New row');
newCell.appendChild(newText);

html表中的行插入

3 个答案: