jQuery: порахуйте кількість рядків у таблиці


Відповіді:


955

Скористайтесь селектором, який виділить усі рядки та візьме довжину.

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

Зауважте: цей підхід також враховує всі Trs кожної вкладеної таблиці!


11
$ ('# myTable tr'). size () поверне те саме значення.
Гаррі Шутлер

31
@Garry - документи вказують, що довжина віддається перевазі розміру (), оскільки це швидше.
tvanfosson

12
.size () call .length внутрішньо
redsquare

2
Він має властивість довжини, оскільки це масив. Я не знаю достатньо історії jQuery, щоб знати, чи завжди об'єкт jQuery розширював масив.
tvanfosson

67
Це також буде рахувати tr у thead ... $ ('# myTable tbody tr'). Довжина; буде рахувати ті лише у таблицях.
Дейв Лоуренс

178

Якщо ви використовуєте <tbody>або <tfoot>в своїй таблиці, вам доведеться використовувати наступний синтаксис, або ви отримаєте неправильне значення:

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

1
Я використовую <tbody>, але я отримую те саме значення
Kreker

1
використовувати $ ('# myTable> tbody: last> tr'). length;
Ріккардо Бассілічі,

7
@DevlshOne Це неправда, довжина не дорівнює нулю, перевірте документацію: api.jquery.com/length
Майк

1
Коли ви вкладете таблиці, це буде рахувати лише рядки у вказаній таблиці, що саме мені було потрібно.
GilShalit

1
@ User12379095 Що - щось на зразок цього: stackoverflow.com/questions/32101764 / ...
AntonChanning

49

Як варіант ...

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

jsFiddle DEMO

Це забезпечить, що будь-які вкладені рядки таблиці також не враховуються.


О, тому що тоді індекс повертає -1. Розумний.
Samuel Edwin Ward

1
Дякую. Їх мало і далеко між собою, але розумні рішення все-таки спалахують.
DevlshOne

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

Ігнорує <thead>рядки та вкладені рядки таблиці. Приємно. jsfiddle.net/6v67a/1576
GreeKatrina

Якщо у "Last" <td>є внутрішня таблиця, вона повертає кількість рядків цієї таблиці !! jsfiddle.net/6v67a/1678
Шаунак Шукла

32

Ну, я отримую рядки attr з таблиці і отримую довжину для цієї колекції:

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

Я думаю, що jQuery працює менше.


2
+1 - добре для сценарію, коли вам передається елемент, який містить таблицю, наприклад, var rowCount = $ (element) .attr ('рядки'). Довжина;
Ніколас Мюррей

9
Використовуючи JQuery v1.9.0, і я повинен використовувати prop () для доступу до "рядків": $ ("# myTable"). Prop ("рядки"). Довжина; (Хром 24)
nvcnvn

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, корисно зробити декілька прикладів, цю функцію можна викликати html, створений із бекенду, а не dom. Дякую
Дхаваль Дейв


8

спробуйте цю, якщо є хтось

Без заголовка

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

Якщо є заголовок, тоді

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

Насолоджуйтесь !!!


1
Він відсутній () після дітей => $ ("# myTable> tbody"). Діти (). Довжина
DrB

1
Заголовок повинен бути укладений, в <thead>який слід зайти раніше <tbody>. Тож -1 не потрібно, якщо таблиця правильно розроблена відповідно до стандарту.
ilpelle

Проблема полягає в тому, що, коли в даних немає запису, він показує довжину як 1, тому що в даних може бути порожній рядок з класом "непарним" у даних .....
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


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.