jQuery : 테이블의 행 수 계산


491

jQuery를 사용하여 테이블 내의 tr 요소 수를 어떻게 계산합니까?

비슷한 질문 이 있다는 것을 알고 있지만 총 행을 원합니다.

답변:


955

모든 행을 선택하고 길이를 취하는 선택기를 사용하십시오.

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

참고 :이 방법은 모든 중첩 테이블의 모든 tr을 계산합니다!


11
$ ( '# myTable tr'). size ()는 같은 값을 반환합니다.
Garry Shutler

31
@Garry-문서는 길이가 빠르기 때문에 size ()보다 길이가 선호됨을 나타냅니다.
tvanfosson

12
.size ()는 내부적으로 .length를 호출합니다.
redsquare

2
배열이므로 길이 속성이 있습니다. jQuery 객체가 항상 배열을 확장했는지 여부를 알기 위해 jQuery 기록을 충분히 알지 못합니다.
tvanfosson

67
이것은 또한 thead에서 tr을 센다 ... $ ( '# myTable tbody tr'). length; 테이블 바디에있는 사람들 만 계산합니다.
Dave Lawrence

178

당신이 사용하는 경우 <tbody>또는 <tfoot>테이블에 다음과 같은 구문을 사용해야합니다 또는 당신은 잘못된 값을 얻을 것이다 :

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

1
나는 <tbody>를 사용하고 있지만 같은 가치를 얻습니다
Kreker

1
$ ( '# myTable> tbody : last> tr'). length를 사용하십시오.
리카르도 바실 리치

7
@DevlshOne 사실이 아니고, 길이가 0이 아닌 문서를 확인하십시오 : api.jquery.com/length
Mike

1
중첩 테이블이 있으면 지정된 테이블의 행만 계산하여 필요한 것입니다.
GilShalit

1
@ user12379095 다음과 같은 것 : stackoverflow.com/questions/32101764/…
AntonChanning

49

아니면 ...

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

jsFiddle 데모

이렇게하면 중첩 된 테이블 행도 계산되지 않습니다.


아, 인덱스는 -1을 반환하기 때문입니다. 영리한.
사무엘 에드윈 워드

1
감사. 그것들은 극히 드물지만, 영리한 솔루션은 몇 번이고 빠져 나갑니다.
DevlshOne

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

<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;
Nicholas Murray

9
JQuery v1.9.0을 사용하고 prop ()을 사용하여 'rows'에 액세스해야합니다. $ ( "# myTable"). prop ( 'rows'). length; (Chromium 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, 몇 가지 예를 수행하는 데 유용이 기능은 잘 .. 감사 등의 백엔드 대신 DOM에서 생성 된 HTML을 위해 호출 할 수 있습니다
Dhaval 데이브

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

datatable에 레코드가 없을 때 길이가 1로 표시됩니다. datatable은 datatable에 "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

3
row_count =  $('#my_table').find('tr').length;
column_count =  $('#my_table').find('td').length / row_count;

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.