5

Javascript を使用して、テーブルの中央に新しいテーブル行を追加しようとしています。新しいテーブル行は、既存の行の 1 つのコピーです。

これに似た質問がstackoverflowにたくさんありますが、この問題を解決するのに役立つものはありませんでした.

function AddRow()
{
    var mainTable = document.getElementById('mainTable');

    mainTable.insertBefore(
        mainTable.rows[0].cloneNode(true),
        mainTable.rows.childNodes[2]);
}

insertBefore() に渡された最後の変数に問題があることはわかっています。これを空白のままにしておくと、コードが正しく実行され、複製された最初の行がテーブルの最後に挿入されます (2 番目のパラメーターが存在しない場合、次のように動作します)。appendRow().

「undefined のプロパティ 2 を読み取れません」というエラーが表示されます。これは、mainTable.rows.childNodes をインデックス付けする有効なオブジェクトとして認識していないことを意味していると思います。

次の方法も試してみましたが、テスト時に「NotFoundError: DOM Exception 8」というよりとらえどころのないエラーが発生しました

function AddRow()
{
    var mainTable = document.getElementById('mainTable');

    mainTable.insertBefore(
        mainTable.rows[0].cloneNode(true),
        mainTable.rows[2]);
}

編集：正常にmainTable.appendChild(mainTable.rows[0].cloneNode(true))動作することに注意してください！問題は、テーブルの最後に追加したくないことです。

4

2 に答える 2

4

混乱は、通常の DOM メソッドとともに、(プロパティを使用して) HTMLTableElementインターフェイスを使用しているという事実によるものです。 rows( insertBefore) 参照ノードが、メソッドが呼び出されるノードの直接の子であることを期待します。

別の回答で指摘されているようにinsertRow、インターフェイスを介して一貫したテーブル抽象化のメソッドを使用できHTMLTableElementます。

ただし、vanilla DOM の方法と一緒にそれを行う方法を知りたい場合は、想定される tbody を認識することでそれを行うことができます。

var mainTable = document.getElementById('myTable');
var tbody = mainTable.children[0]; // or to use HTMLTableElement, mainTable.tBodies[0]

// Mixing HTMLTableElement with vanilla DOM
tbody.insertBefore(mainTable.rows[0].cloneNode(true), mainTable.rows[2]);

// or pure vanilla DOM:
// tbody.insertBefore(tbody.children[0].cloneNode(true), tbody.children[2]);
<table id="myTable">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

于 2013-06-08T23:47:04.587 に答える