jQuery:テーブルの行数を数える


491

jQueryを使用してテーブル内のtr要素の数を数えるにはどうすればよいですか?

同様の質問があることは知っていますが、行の合計だけが必要です。

回答:


955

すべての行を選択し、長さを取るセレクターを使用します。

var rowCount = $('#myTable tr').length;

注:このアプローチでは、ネストされたすべてのテーブルのすべてのtrもカウントされます。


11
$( '#myTable tr')。size()は同じ値を返します。
Garry Shutler、

31
@Garry-ドキュメントでは、長さがsize()よりも高速であるため推奨されていることが示されています。
tvanfosson 2009

12
.size()の呼び出しは内部.LENGTH
redsquare

2
配列であるため、長さプロパティがあります。jQueryオブジェクトが常に配列を拡張したかどうかを知るには、jQueryの履歴を十分に知りません。
tvanfosson 2009年

67
これは、thead内のtrもカウントします... $( '#myTable tbody tr')。length; ...唯一のテーブル本体のものをカウントします
デイブ・ローレンス

178

あなたが使用している場合<tbody>か、<tfoot>あなたのテーブルには、次の構文を使用する必要がありますか、不正な値が得られます。

var rowCount = $('#myTable >tbody >tr').length;

1
<tbody>を使用していますが、同じ値が得られます
Kreker

1
$( '#myTable> tbody:last> tr')。lengthを使用します。
Riccardo Bassilichi 2012

7
@DevlshOne正しくありません。長さがゼロベースではありません。ドキュメントを確認してください:api.jquery.com/length
Mike

1
ネストされたテーブルがある場合、これは指定されたテーブルの行のみをカウントするため、これが必要でした。
GilShalit、2013年

1
:このようなuser12379095何か@ stackoverflow.com/questions/32101764/...
AntonChanning

49

あるいは...

var rowCount = $('table#myTable tr:last').index() + 1;

jsFiddleデモ

これにより、ネストされたテーブル行もカウントされなくなります。


ああ、それからインデックスは-1を返すからです。賢い。
Samuel Edwin Ward

1
ありがとう。それらは数が少なく、はるかに隔たりがありますが、賢い解決策は時々抜け出します。
DevlshOne 2013年

var rowCount = $('table#myTable tr:last').index() + 1;
Ouadie 2013年

<thead>行とネストした表の行を無視します。いいね。jsfiddle.net/6v67a/1576
GreeKatrina

Last <td>に内部テーブルがある場合、そのテーブルの行数を返します!! jsfiddle.net/6v67a/1678
Shaunak Shukla

32

さて、私はテーブルからattr行を取得し、そのコレクションの長さを取得します。

$("#myTable").attr('rows').length;

jQueryはあまり機能しないと思います。


2
+1-テーブルを含む要素が渡されるシナリオに適しています。例:var rowCount = $(element).attr( 'rows')。length;
ニコラスマレー

9
JQuery v1.9.0を使用して '行'にアクセスするには、prop()を使用する必要があります。$( "#myTable")。prop( 'rows')。length; (Chromium 24)
nvcnvn 2013

16

これが私の見解です。

//Helper function that gets a count of all the rows <TR> in a table body <TBODY>
$.fn.rowCount = function() {
    return $('tr', $(this).find('tbody')).length;
};

使用法:

var rowCount = $('#productTypesTable').rowCount();

非常に素晴らしい関数@Ricky G、いくつかのことを行うのに便利な例この関数は、domの代わりにバックエンドから生成されたhtmlに対しても呼び出すことができます。ありがとう
Dhaval dave

12

私は以下を得ました:

jQuery('#tableId').find('tr').index();

3
行数を取得するには、1を加算します
Olivier

8

tbodyがある場合は、これを試してください

ヘッダーなし

$("#myTable > tbody").children.length

ヘッダーがある場合

$("#myTable > tbody").children.length -1

楽しい!!!


1
chidlren => $( "#myTable> tbody")。children()。lengthの後に()がありません
DrB

1
ヘッダーは、<thead>前に来るように囲まれている必要があり<tbody>ます。したがって、テーブルが標準に従って適切に設計されている場合、-1は必要ありません。
ilpelle

問題は、データテーブルにレコードがない場合、データテーブルに長さが1と表示されるためです。データテーブルは、データテーブルのクラス "odd"で空の行をレンダリングします...
Syed Ali

UserScriptに動的テーブルがあり、これが機能した唯一のソリューションでした
brasofilo

7

AJAXリターンでこれを行う方法が必要だったので、私はこの作品を書きました:

<p id="num_results">Number of results: <span></span></p>

<div id="results"></div>

<script type="text/javascript">
$(function(){
    ajax();
})

//Function that makes Ajax call out to receive search results
var ajax = function() {
    //Setup Ajax
    $.ajax({
        url: '/path/to/url', //URL to load
        type: 'GET', //Type of Ajax call
        dataType: 'html', //Type of data to be expected on return
        success: function(data) { //Function that manipulates the returned AJAX'ed data
            $('#results').html(data); //Load the data into a HTML holder
            var $el = $('#results'); //jQuery Object that is holding the results
            setTimeout(function(){ //Custom callback function to count the number of results
                callBack($el);
            });
        }
    });
}

//Custom Callback function to return the number of results
var callBack = function(el) {
    var length = $('tr', $(el)).not('tr:first').length; //Count all TR DOM elements, except the first row (which contains the header information)
    $('#num_results span').text(length); //Write the counted results to the DOM
}
</script>

これは明らかに簡単な例ですが、役立つ場合があります。


6

テーブル内のテーブルのth行と行をカウントせずに行をカウントしたい場合、これは本当にうまくいくことがわかりました:

var rowCount = $("#tableData > tbody").children().length;

列をカウントするように変更するにはどうすればよいですか?
ePandit


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.