[JavaScript] テーブルの行数、列数を取得する

投稿日：2016年10月7日更新日：2018年4月28日

テーブルの行数、列数を取得するにはrows.length、cells.lengthを使用します。

サンプル

例）id="tbl1"のテーブルの行数、列数を取得する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
function getRowCol(){
  //行数取得
  var row = tbl1.rows.length;

  //列数取得（rowsの引数には行インデックス番号を指定します）
  var col = tbl1.rows[1].cells.length;

  //結果表示
  alert("行数:" + row + " 列数:" + col);
}
</script>
</head>
<body>
  <table id="tbl1">
    <thead>
      <tr><th>列１</th><th>列２</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      </tbody>
    </table>
  <input type="button" value=" ボタン " onclick="getRowCol();" />
</body>
</html>

<!DOCTYPE html>

<head>

function getRowCol(){

//行数取得

var row = tbl1.rows.length;

//列数取得（rowsの引数には行インデックス番号を指定します）

var col = tbl1.rows[1].cells.length;

//結果表示

alert("行数:" + row + " 列数:" + col);

}

</script>

</head>

<body>

<thead>

</thead>

<tbody>

</tbody>

</table>

</body>

</html>

サンプルテーブル

列１	列２
A1	A2
B1	B2
C1	C2

（結果）: 行数：4 列数：2

解説

行数はthead,tbody,th,td関係なく、単純に全ての行数が返ります。
列数は指定した行の列数を返します。colspanで列を結合していた場合は、結合後の列数が返ります。

執筆者：とら