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*」属性またはプロパティはありますか? この行は、フォームの現在値プロパティを取得しようとし、その値プロパティを読み取ろうとします。エラーをスローするか、undefinedを返す可能性があります。

コードに合わせて最小限の HTML を投稿できますか? 私が見る限り、上記は何も役に立ちません。

于 2013-10-24T22:51:26.947 に答える
0

JQuery の .serializeArray() メソッドを見ることができます。

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

于 2013-10-24T22:51:37.440 に答える