HTML DOM テーブルの rows コレクションとは？使い方をサンプルコード付きで解説
HTML DOM のテーブル rows コレクションは、HTML ドキュメント内のテーブルに含まれるすべての <tr> 要素のコレクションを返します。このコレクションを利用すると、JavaScript からテーブルの行数を取得したり、特定の行にアクセスしたりすることが簡単に行えます。
構文
rows コレクションの構文は以下のとおりです。
object.rows
rows コレクションのプロパティ
rows コレクションには、以下のプロパティが用意されています。
| プロパティ | 説明 |
|---|---|
| length | HTML ドキュメント内のコレクションに含まれる <tr> 要素の数を返します。 |
rows コレクションのメソッド
rows コレクションには、特定の行を取得するための以下のメソッドが用意されています。
| メソッド | 説明 |
|---|---|
| [index] | コレクションから、指定したインデックス位置にある <tr> 要素を返します。 |
| item(index) | コレクションから、指定したインデックス位置にある <tr> 要素を返します。 |
| namedItem(id) | コレクションから、指定した id を持つ <tr> 要素を返します。 |
それでは、HTML DOM テーブル rows コレクションの具体的な使用例を見ていきましょう。
サンプルコード
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
text-align: center;
}
table {
margin: 2rem auto;
}
.show {
font-size: 1.2rem;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
<body>
<h1>DOM テーブル rows コレクションのデモ</h1>
<table border="2">
<thead>
<tr>
<th>名前</th>
<th>学籍番号</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>071717</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">行数を取得</button>
<div class="show"></div>
<script>
function get() {
var table = document.querySelector('table');
document.querySelector('.show').innerHTML = '行数 : ' + table.rows.length;
}
</script>
</body>
</html>出力
「行数を取得」ボタンをクリックすると、rows コレクションに含まれる <tr> 要素の数が画面に表示されます。この例では、ヘッダー行を含む合計 3 行がカウントされます。
まとめ
rows コレクションを使えば、テーブル内の行を簡単に操作できます。行数の取得には length プロパティ、特定の行へのアクセスには [index]、item(index)、namedItem(id) の各メソッドを用途に応じて使い分けるとよいでしょう。
-
HTML DOMテーブルのtFootプロパティの使い方を解説
HTML DOMのtFootプロパティは、HTMLドキュメント内のテーブルに含まれる<tfoot>要素を取得するために使用されます。この記事では、tFootプロパティの構文と実際の使用例について詳しく解説します。構文tFootプロパティの基本構文は以下のとおりです。object.tFootこのプロパティを呼び出すと、対象のテーブル内にある<tfoot>要素が返されます。テーブルに<tfoot>要素が存在しない場合は、nullが返される点に注意してください。tFootプロパティの使用例それでは、HTML DOMテーブルのtFootプロパティを使った具体的なサン
-
HTML DOM Textareaのrowsプロパティとは？構文と使い方をサンプルコードで解説
HTML DOMのTextarea rowsプロパティは、HTML文書内のテキストエリア（textarea）要素に設定されているrows属性の値を取得・変更することができます。rows属性は、テキストエリアの表示行数を指定するもので、この値を操作することでテキストエリアの高さを動的に変えることが可能です。構文rowsプロパティの基本的な構文は以下の通りです。1. rows属性の値を取得する場合object.rows2. rows属性に値を設定する場合object.rows = 行数;それでは、実際の使用例を見ていきましょう。サンプルコード以下の例では、ボタンをクリックするとテキストエリアのro