テーブル行コレクション
例
テーブルにいくつの行があるかを調べます。
var x = document.getElementById("myTable").rows.length;
xの結果は次のようになります。
2
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
rowsコレクションは、テーブル内のすべての<tr>要素のコレクションを返します。
注:コレクション内の要素は、ソースコードに表示されるとおりに並べ替えられます。
ヒント:insertRow()メソッドを使用して、新しい行(<tr>)を作成します。
ヒント:行を削除するには、 deleteRow()メソッドを使用します。
ヒント:insertCell()メソッドを使用して、新しいセル(<td>)を作成します。
ヒント:セルを削除するには、deleteCell()メソッドを使用します。
ヒント:cellsコレクションを使用して、テーブル内のすべての<td>または<th>要素のコレクションを返します。
ブラウザのサポート
Collection | |||||
---|---|---|---|---|---|
rows | Yes | Yes | Yes | Yes | Yes |
構文
tableObject.rows
プロパティ
Property | Description |
---|---|
length | Returns the number of <tr> elements in the collection. Note: This property is read-only |
メソッド
Method | Description |
---|---|
[index] | Returns the <tr> element from the collection with the specified index (starts at 0). Note: Returns null if the index number is out of range |
item(index) | Returns the <tr> element from the collection with the specified index (starts at 0). Note: Returns null if the index number is out of range |
namedItem(id) | Returns the <tr> element from the collection with the specified id. Note: Returns null if the id does not exist |
技術的な詳細
DOMバージョン: | コアレベル2ドキュメントオブジェクト |
---|---|
戻り値: | <table>要素内のすべての<tr>要素を表すHTMLCollectionオブジェクト。コレクション内の要素は、ソースコードに表示されるとおりに並べ替えられます |
その他の例
例
[インデックス]
テーブルの最初の<tr>要素(インデックス0)のinnerHTMLに警告します。
alert(document.getElementById("myTable").rows[0].innerHTML;
例
item(インデックス)
テーブルの最初の<tr>要素(インデックス0)のinnerHTMLに警告します。
alert(document.getElementById("myTable").rows.item(0).innerHTML);
例
namedItem(id)
テーブル内のid = "myRow"で<tr>要素のinnerHTMLに警告します。
alert(document.getElementById("myTable").rows.namedItem("myRow").innerHTML);
例
最初のテーブルセルの内容を変更します。
var x = document.getElementById("myTable").rows[0].cells;
x[0].innerHTML = "NEW CONTENT";
関連ページ
HTMLリファレンス:HTML <tr>タグ
JavaScriptリファレンス:HTML DOMTableRowオブジェクト
❮テーブルオブジェクト