html表の行挿入

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> 

これは、フォーム送信

<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> 

ためのJavaScriptコードですが、フォームが送信されると、submitedデータは、直後tbaleとdisapearに表示されます。

Answer 1

データが消えている理由は、標準フォームを使用すると、フォームが自身に送信されるときにページがリフレッシュされるためです。

はこれを防ぐには、例えば、あなたの関数で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 2

送信ボタンを押したときにフォームが送信されるため、フォームが効果的に更新されるため、onsubmit = "return false;クイックフィックスのためのフォームタグへ

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);