0

我正在尝试从表单获取输入并将其放入数组中，然后使用 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>
4

2 回答 2

0

只是一些评论：

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

这试图获取标签名称为“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;

我认为这是对表单的引用。它是否具有“present-value* 属性或属性？这一行尝试获取表单的present-value属性，然后读取它的value属性。很可能它只是抛出错误或返回undefined。

你能发布一些最小的 HTML 来配合代码吗？据我所知，上述内容不会做任何有用的事情。

于 2013-10-24T22:51:26.947 回答
0

您可能会查看 JQuery 的 .serializeArray() 方法：

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

于 2013-10-24T22:51:37.440 回答