diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/api/htmltableelement/insertrow/index.html | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/ja/web/api/htmltableelement/insertrow/index.html')
-rw-r--r-- | files/ja/web/api/htmltableelement/insertrow/index.html | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/files/ja/web/api/htmltableelement/insertrow/index.html b/files/ja/web/api/htmltableelement/insertrow/index.html new file mode 100644 index 0000000000..2d0a6808be --- /dev/null +++ b/files/ja/web/api/htmltableelement/insertrow/index.html @@ -0,0 +1,114 @@ +--- +title: HTMLTableElement.insertRow +slug: Web/API/HTMLTableElement/insertRow +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/HTMLTableElement/insertRow +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p><code>insertRow</code> は、テーブル内に新しい行を挿入します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">var <em>row</em> = <em>HTMLTableElement</em>.insertRow(<em>index</em>);</pre> +<ul> + <li><a href="/ja/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement"><code>HTMLTableElement</code></a>: HTML table 要素への参照</li> + <li><code>index</code>: 新しい行の行番号( 0 が一行目)</li> + <li><code>row</code>: 新しい行への参照が割り当てられる<br> + <code>index</code> に -1 または行数に等しい場合、行は最後の行として追加される。<br> + <code>index</code> が省略したり、行数より大きい場合、エラーが発生する。</li> + <li>テーブル内に既に複数の <code>tbody</code> 要素が存在する場合、新しい行は最後の tbody 要素に挿入されます。<br> + 特定の tbody 要素に行を挿入するには、以下の様にします。 + <pre><code>var <em>specific_tbody</em> = document.getElementById(<em>tbody_id</em>); +var <em>row</em> = specific_tbody.insertRow(<em>index</em>)</code></pre> + </li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:html"><table id="TableA"> + <tr> + <td>Old top row</td> + </tr> +</table> + +<script type="text/javascript"> + +function addRow(tableID) { + // table 要素への参照を取得し、変数に代入 + var tableRef = document.getElementById(tableID); + + // テーブルのインデックス 0 の行(一行目)に行を挿入 + var newRow = tableRef.insertRow(0); + + // 一行目にセルを挿入 + var newCell = newRow.insertCell(0); + + // 作成したセルにテキストノードを挿入 + var newText = document.createTextNode('New top row') + newCell.appendChild(newText); +} + +// 引数にテーブルの id を指定して関数 addRow() を実行 +addRow('TableA'); + +</script></pre> +<ul> + <li>HTML 文書を valid なものとするには、tr 要素か td 要素の内、少なくとも一つが必要です。</li> + <li><code>insertRow</code> は直接テーブルに行を挿入し、<strong>新しい行への参照を返します</strong>。<a href="/ja/docs/DOM/document.createElement" title="DOM/document.createElement"><code>document.createElement()</code></a> などで新たに tr 要素を作成する必要はありません。</li> +</ul> +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>4</td> + <td>3</td> + <td>5.5</td> + <td>10.10</td> + <td>4</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<h3 id="Gecko-specific_notes" name="Gecko-specific_notes">Gecko 固有の注意事項</h3> +<ul> + <li>Gecko 20.0 {{geckoRelease("20.0")}} 以降では、引数 <var>index</var> は HTML の仕様に則り省略可能となり、初期値は <code>-1</code> となりました。</li> +</ul> +<h2 id="Specification" name="Specification">仕様書</h2> +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903">DOM Level 2 HTML: insertRow</a></li> +</ul> |