jQuery: Anzahl der Zeilen in einer Tabelle zählen


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!


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;

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


49

Alternative...

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

jsFiddle DEMO

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


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.


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();

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();

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


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.


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;

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;

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.