jQuery: Anzahl der Zeilen in einer Tabelle zählen

491

Wie zähle ich mit jQuery die Anzahl der tr-Elemente in einer Tabelle?

Ich weiß, dass es eine ähnliche Frage gibt , aber ich möchte nur die Gesamtzahl der Zeilen.

Gemeinschaft
quelle

Antworten:

955

Verwenden Sie einen Selektor, der alle Zeilen auswählt und die Länge übernimmt.

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

Hinweis: Dieser Ansatz zählt auch alle trs jeder verschachtelten Tabelle!

Tvanfosson
quelle
11
$ ('# myTable tr'). size () gibt den gleichen Wert zurück.
Garry Shutler
31
@Garry - Die Dokumente geben an, dass die Länge der Größe () vorgezogen wird, da sie schneller ist.
Tvanfosson
12
.size () ruft intern
.length auf
2
Es hat eine Längeneigenschaft, weil es ein Array ist. Ich weiß nicht genug über den Verlauf von jQuery, um zu wissen, ob das jQuery-Objekt immer ein Array erweitert hat.
Tvanfosson
67
Dies zählt auch tr im Kopf ... $ ('# myTable tbody tr'). Length; wird diese nur in Tischkörpern zählen ..
Dave Lawrence
178

Wenn Sie <tbody>oder <tfoot>in Ihrer Tabelle verwenden, müssen Sie die folgende Syntax verwenden, sonst erhalten Sie einen falschen Wert:

var rowCount = $('#myTable >tbody >tr').length;
James Moberg
quelle
1
Ich benutze <tbody>, aber ich bekomme den gleichen Wert
Kreker
1
benutze $ ('# myTable> tbody: last> tr'). length;
Riccardo Bassilichi
7
@ DevlshOne Das ist nicht wahr, Länge ist nicht Null Basis, überprüfen Sie die Dokumentation: api.jquery.com/length
Mike
1
Wenn Sie verschachtelte Tabellen haben, zählt dies nur die Zeilen in der angegebenen Tabelle, was ich brauchte.
GilShalit
1
@ user12379095 So ähnlich: stackoverflow.com/questions/32101764/…
AntonChanning
49

Alternative...

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

jsFiddle DEMO

Dadurch wird sichergestellt, dass verschachtelte Tabellenzeilen nicht ebenfalls gezählt werden.

DevlshOne
quelle
Oh, denn dann gibt der Index -1 zurück. Klug.
Samuel Edwin Ward
1
Vielen Dank. Es gibt nur wenige, aber hin und wieder rutschen clevere Lösungen heraus.
DevlshOne
var rowCount = $('table#myTable tr:last').index() + 1;
Ouadie
Ignoriert <thead>Zeilen und verschachtelte Tabellenzeilen. Nett. jsfiddle.net/6v67a/1576
GreeKatrina
Wenn Last <td>eine innere Tabelle hat, wird die Zeilenanzahl dieser Tabelle zurückgegeben !! jsfiddle.net/6v67a/1678
Shaunak Shukla
32

Nun, ich bekomme die attr-Zeilen aus der Tabelle und bekomme die Länge für diese Sammlung:

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

Ich denke, dass jQuery weniger funktioniert.

jjroman
quelle
2
+1 - Gut für das Szenario, in dem Ihnen ein Element übergeben wird, das eine Tabelle enthält, z. B. var rowCount = $ (Element) .attr ('Zeilen'). Length;
Nicholas Murray
9
Verwenden Sie JQuery v1.9.0 und ich muss prop () verwenden, um auf 'Zeilen' zuzugreifen: $ ("# myTable"). Prop ('Zeilen'). Length; (Chrom 24)
nvcnvn
16

Hier ist meine Meinung dazu:

//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;
};

VERWENDUNGSZWECK:

var rowCount = $('#productTypesTable').rowCount();
Ricky G.
quelle
Sehr schöne Funktion @Ricky G, nützlich, um einige Dinge zu tun. Beispiel: Diese Funktion kann auch für HTML aufgerufen werden, das vom Backend anstelle von dom generiert wurde. Danke
Dhaval Dave,
12

Ich habe folgendes bekommen:

jQuery('#tableId').find('tr').index();
chifliiiii
quelle
3
plus 1, um die Anzahl der Zeilen zu erhalten
Olivier
8

Versuchen Sie dies, wenn es jemanden gibt

Ohne Header

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

Wenn es einen Header gibt, dann

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

Genießen!!!

BornToCode
quelle
1
Es fehlt () nach chidlren => $ ("# myTable> tbody"). Children (). Länge
DrB
1
Der Header sollte eingeschlossen sein, in <thead>den vorher kommen sollte <tbody>. Das -1 sollte also nicht benötigt werden, wenn die Tabelle gemäß dem Standard richtig gestaltet ist.
Ilpelle
Das Problem ist, wenn datatable keinen Datensatz hat, wird die Länge als 1 angezeigt, da datatable eine leere Zeile mit der Klasse "odd" in datatable rendert .....
Syed Ali
Ich habe eine dynamische Tabelle in einem UserScript und dies war die einzige Lösung, die funktioniert hat
brasofilo
7

Ich brauchte einen Weg, dies in einer AJAX-Rückkehr zu tun, also schrieb ich dieses Stück:

<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>

Dies ist natürlich ein kurzes Beispiel, aber es kann hilfreich sein.

dennismonsewicz
quelle
6

Ich fand das sehr gut, wenn Sie Zeilen zählen möchten, ohne die th und alle Zeilen aus Tabellen innerhalb von Tabellen zu zählen:

var rowCount = $("#tableData > tbody").children().length;
Zoe
quelle
Wie ändere ich es, um Spalten zu zählen?
ePandit
3
row_count =  $('#my_table').find('tr').length;
column_count =  $('#my_table').find('td').length / row_count;
Kybernetisch
quelle
1

var trLength = jQuery('#tablebodyID >tr').length;

Sivaprakash
quelle