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中没有这样的元素。

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

这将覆盖TR

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

的前值，这将覆盖TD 的的前值。

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

我假定这是形式的参考。它有一个“现值*属性或特性呢？这行试图获取表单的现值属性，然后读取它的值财产。有可能只是抛出一个错误或返回未定义。

？

你可以张贴一些最起码的HTML的代码去，据我所看到的，上面会不会做任何有用

Answer 2

你可以看看JQuery的.serializeArray（）方法：

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