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

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

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

你可以发布一些最小的HTML来代码吗？据我所知，上述内容不会有用。

Answer 2

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

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

JS - 从表单和输入获取输入将它放入数组，然后将新行追加到表（DOM）

2 个答案: