JS - 폼에서 입력 가져 오기 및 배열 넣기 및 테이블 (DOM)에 새 행 추가

Question

양식에서 입력 가져 오려고 및 배열 넣고 다음 해당 배열을 새 DOM 조작을 사용하여 테이블에 행을 추가합니다. 지금까지 가지고있는 값을 받고있는 동안 값은 테이블에 표시되지 않지만 빈 행이 삽입됩니다. 도와주세요!

(function(){ 

var theValue; 

var formControls = document.getElementById('theForm'); 
var table = document.querySelector('info'); 

var handler = function(){ 
    var tbody = document.getElementsByTagName('tbody').item(0); 


    for (var i = 0; i < 3; i++) { 
     var tr = 'tr' + [i], 
     tr = document.createElement('tr'); 
     var displayValue = 'td' + [i], 
     displayValue = document.createElement('td'); 
     var enteredValue = this['present-value'].value; 
     theValue = document.createTextNode(enteredValue); 
     tr.appendChild(displayValue); 
     tbody.appendChild(tr); 

     return false; 
    } 




} // end handler 

formControls.onsubmit = handler; 


})(); 

HTML

<div id="container"> 
<div id="controls"> 
    <h2>Controls</h2> 
    <form id="theForm"> 
     <fieldset> 
      <label for="present-value">Enter Value</label> 
      <input id="present-value" name="present-value" type="text"> 
      <button type="submit">Add</button> 
     </fieldset> 
    </form> 
</div> 
<div id="display"> 
    <h2>Values</h2> 
    <table class="info"> 
     <thead> 
      <tr> 
       <th>Value</th> 
      </tr> 
     </thead> 

     <tbody> 

     </tbody> 
    </table> 
    </div> 
</div> 
</div> 

Answer 1

그냥 몇 가지 의견 :

"정보"의 태그 이름으로 요소를 얻기 위해 시도

> var table = document.querySelector('info'); 

. HTML에는 그러한 요소가 없습니다. TR

> var displayValue = 'td' + [i], 
> displayValue = document.createElement('td'); 

의 이전 값을 덮어 쓰기하고 그 TD의 이전 값을 덮어

> var tr = 'tr' + [i], 
> tr = document.createElement('tr'); 

.

> var enteredValue = this['present-value'].value; 

난 이 폼에 대한 참조임을 가정. 그것은이 "현재의 값이 * 속성 또는 속성?이 줄 형태의 현재 가치 속성을 얻기 위해 시도해야합니까, 다음은 값 숙박 시설의 읽을. 가능성은 단지에서 오류가 발생하거나 정의되지 않은 반환합니다.

을 ?.

당신이 지금까지 내가, 위에서 유용한 아무것도하지 않습니다 볼 수있는 코드와 함께 갈 최소한의 HTML을 게시 할 수 있습니다 당신은 jQuery의 .serializeArray 볼 수

Answer 2

() 메소드 :

http://api.jquery.com/serializeArray/