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> 

의 자바 스크립트 코드이지만 양식이 제출되면, submited 데이터 직후 tbale와 사라지는에 나타납니다.

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