2

初めての質問なので、間違っていたらすみません。

JavaScript を使用してテーブルに行を追加しようとしています。新しく追加された行は、最後から 2 番目の位置に追加されます。最後の行には、新しい行を作成するボタンが含まれています。最後の行には「submitrow」というIDがありますが、その要素を取得してinsertBeforeに渡すと、どういうわけか機能しません。lastChild を 2 番目のパラメーターとして insertBefore に渡すと、動作も奇妙になります。

本文では、これは次の形式です。

<form>
    <input type="hidden" name="submit_done" value="true" />
    <table id="formtable">
        <tr>
            <td>Number : </td>
            <td><input type="text" name="num[]" /></td>
        </tr>
        <tr id="submitrow">
            <td><input type="button" value="Add one more" onclick="addRow()" /></td>
            <td><input type="submit" value="Go!" /></td>
        </tr>
    </table>
</form>

JavaScript 関数は次のとおりです。

function addRow(){
    var new_tr  = document.createElement('tr');
    var new_td1     = document.createElement('td');
    var new_td2     = document.createElement('td');
    var new_input   = document.createElement('input');

    new_td1.innerHTML = 'Number : ';

    new_input.type = 'text';
    new_input.name = 'num[]';
    new_td2.appendChild(new_input);

    new_tr.appendChild(new_td2);
    new_tr.insertBefore(new_td1, new_td2);

    var formtable   = document.getElementById('formtable');
    var submitrow   = document.getElementById('submitrow');
    submitrow.style.backgroundColor='red'; /*Works fine, paints button row red*/
    formtable.insertBefore(new_tr, submitrow); /*fails, invalid argument*/
}

さて、問題は次のとおりです。

  1. insertBefore は最後の行で失敗します。insertBefore は new_tr オブジェクトでも同様に試行されており、正常に動作することに注意してください。したがって、無効な引数の可能性があるのは submitRow だけです。失敗したステートメントの 1 行上で、shich が正常に赤く塗りつぶされます。

  2. 失敗した呼び出しに対して、代わりにが使用されているsubmitrow場合formtable.lastChildは実行されます。しかし、どういうわけか、その lastChild には上の行も含まれています。つまり、さらに 4 行追加してテスト入力に 1、2、3、4、5 と入力し、[もう 1 つ追加] ボタンを押すと、4 と 5 の間に行が追加されます。

私はそれを推論するために多くのことを試みましたが、どちらの状況の背後にある論理も得ることができませんでした.

解決を願って、皆様に感謝します。

アバイ バーブ、インド

4

1 に答える 1

6

「JavaScript DOM insertBefore が適切に使用されていません」でタイトルを変更する必要があります。

これは、DOM を配置していなくても、ブラウザー<tbody>がテーブルの行をラップする要素を自動的に作成するためです。そのため、 がの親で#formtableはないことが起こり、その#submitrowためにエラーが発生します。

これを試して：

formtable.tBodies[0].insertBefore(new_tr, submitrow);

または、より一般的に：

submitrow.parentNode.insertBefore(new_tr, submitrow);

(それをサポートするブラウザーには、次のものもあります。

submitrow.insertAdjacentElement("beforeBegin", new_tr);

Internet Explorer、Chrome、Safari、Opera はサポートしていますが、Firefox はサポートしていませんが、簡単にシミングできます。とにかく、このようなものを使用することはお勧めしません。)

また、一般的なアドバイスとして、テーブルを書き留める際には常にタグを使用してください。<tbody>

<table id="formtable">
    <tbody>
        <tr>
            <td>Number : </td>
            <td><input type="text" name="num[]" /></td>
        </tr>
        <tr id="submitrow">
            <td><input type="button" value="Add one more" onclick="addRow()" /></td>
            <td><input type="submit" value="Go!" /></td>
        </tr>
    </tbody>
</table>

そしてもちろん、必要なときに<thead>。<tfoot>

于 2012-09-07T08:29:06.227 に答える