1. ホーム
  2. javascript

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

2023-07-27 19:21:45

質問

JavaScriptでHTMLの行数を取得する方法 table の行数を取得するには?

どのように解決するのですか?

与えられた

<table id="tableId">
    <thead>
        <tr><th>Header</th></tr>
    </thead>
    <tbody>
        <tr><td>Row 1</td></tr>
        <tr><td>Row 2</td></tr>
        <tr><td>Row 3</td></tr>
    </tbody>
    <tfoot>
        <tr><td>Footer</td></tr>
    </tfoot>
</table>

とし

var table = document.getElementById("tableId");

行の数え方は2通りあります。

var totalRowCount = table.rows.length; // 5
var tbodyRowCount = table.tBodies[0].rows.length; // 3

table.rows.length はALL <tr> 要素の量を返す。つまり、上のテーブルの場合は 5 を返しますが、ほとんどの人が期待するのは 3 . その table.tBodies は、すべての <tbody> 要素の配列を返しますが、ここでは最初のものだけを取り出します (テーブルはひとつだけです)。その上で行を数えると、期待される値である 3 .