--- title: HTMLTableRowElement.insertCell slug: Web/API/HTMLTableRowElement/insertCell tags: - DOM - Gecko - Gecko DOM Reference - tableRow translation_of: Web/API/HTMLTableRowElement/insertCell ---
テーブル行に新規セルを挿入し、セルへの参照を返します。
var cell = HTMLTableRowElement.insertCell(index);
HTMLTableRowElement
: HTML の tr 要素への参照index
: 新しいセルのセルインデックスcell
: 新しいセルへの参照が割り当てられる。index
が -1 またはセル数と同じである場合は、セルは行内の最後のセルとして挿入される。 index
が省略されているか行のセル数より大きい場合は IndexSizeError が発生する。<table> <tr id="row0"> <td>Original cell</td> </tr> </table> <script type="text/javascript"> function addCell(tableRowID) { // 引数に指定された id によりテーブル行要素への参照を取得 var rowRef = document.getElementById(tableRowID); // セルインデックス 0 の箇所にセルを挿入 var newCell = rowRef.insertCell(0); // セルにテキストノードを追加 var newText = document.createTextNode('New cell') newCell.appendChild(newText); } // 対象テーブル行の id をパラメータとし、関数 addCell を実行 addCell('row0'); </script>
対象テーブルを valid な HTML とするには、tr 要素が最低でもひとつ td 要素を持っていなければなりません。
insertCell
はテーブルにセルを直接的に挿入して新しい参照を返すものである事に注意して下さい。このメソッドを用いる場合、 予め {{domxref("document.createElement()")}} によって td 要素を生成する必要はありません。
-1
となりました。