JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでHTMLテーブルの行数を取得する方法

JavaScriptでHTMLテーブルの行数を取得したい場面はよくあります。例えば、テーブルに表示されているデータの件数を確認したり、動的に行を追加・削除した後の状態を把握したりするケースです。

サンプルとなるHTMLテーブル

まず、以下のようなHTMLテーブルを用意します。

<table id="tblDemo" border="1">
<thead>
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
</thead>
<tbody>
<tr><td>John</td><td>21</td></tr>
<tr><td>David</td><td>22</td></tr>
<tr><td>Bob</td><td>20</td></tr>
<tr><td>Mike</td><td>24</td></tr>
</tbody>
</table>

rows.lengthで行数を取得する

HTMLテーブルの行数を取得するには、rows.lengthプロパティを使用します。rowsはテーブル内のすべての<tr>要素のコレクション（HTMLCollection）を返すため、そのlengthを参照することで総行数がわかります。

以下が完全なコード例です。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テーブルの行数を取得</title>
</head>
<body>
<table id="tblDemo" border="1">
<thead>
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
</thead>
<tbody>
<tr><td>John</td><td>21</td></tr>
<tr><td>David</td><td>22</td></tr>
<tr><td>Bob</td><td>20</td></tr>
<tr><td>Mike</td><td>24</td></tr>
</tbody>
</table>
<script>
    var allTableData = document.getElementById("tblDemo");
    var totalNumberOfRows = allTableData.rows.length;
    console.log("合計行数 = " + totalNumberOfRows);
</script>
</body>
</html>

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「index.html」など任意の名前で保存し、VS Codeエディタ上でファイルを右クリックして「Open with Live Server」を選択してください。ブラウザでページが開き、開発者ツールのコンソールに結果が出力されます。

実行結果

このプログラムを実行すると、コンソールに以下のように出力されます。

合計行数 = 5

補足：tbodyだけの行数を取得したい場合

table.rows.lengthはヘッダー行（<thead>内の行）も含めた全行数を返します。今回の例では、ヘッダー1行＋データ4行の合計5行となります。

もしデータ部分（<tbody>）のみの行数を取得したい場合は、以下のようにtbodyに対してrows.lengthを使用します。

var tbodyRows = document.querySelector("#tblDemo tbody").rows.length;
console.log("データ行数 = " + tbodyRows); // 出力: データ行数 = 4

用途に応じて使い分けることで、より正確に行数を取得できます。

  1. HTMLでテーブルのセルを結合する方法：colspanとrowspanの使い方

    HTMLでテーブルのセルを結合するには、colspan属性とrowspan属性を使用します。それぞれの役割は以下の通りです。rowspan属性：セルが縦方向（行）にまたがる行数を指定しますcolspan属性：セルが横方向（列）にまたがる列数を指定しますどちらの属性も<td>タグ内に記述し、値は数値で指定します。例えば、rowspan=2と指定すれば2行分、colspan=2と指定すれば2列分のセルが結合されます。例1：通常のテーブルを作成するまず、HTMLで3行×3列のシンプルなテーブルを作成してみましょう。<!DOCTYPE html> <html> &n

  2. HTMLでの色指定方法を徹底解説！Hex・RGB・HSLの基本的な使い方

    ウェブサイトに魅力的な見た目と快適な使い心地をもたらすためには、色の選択が非常に重要です。HTMLでは、色を指定する方法として主に「Hex（16進数）」「RGB」「HSL」の3つの形式があります。本記事では、それぞれの特徴と具体的な書き方を、実際に動作するサンプルコードとともにわかりやすく解説します。 Hexコード（16進数による色の表現） 16進数（ヘックス）カラーコードは、色を6桁の英数字で表現する方法です。最初の2桁（RR）が赤（Red）、次の2桁（GG）が緑（Green）、最後の2桁（BB）が青（Blue）の強度をそれぞれ表します。 16進数の値は、Adobe Photoshopなどの