jQuery:计算表中的行数


Answers:


955

使用选择器将选择所有行并采用长度。

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

注意:此方法还计算每个嵌套表的所有trs!


11
$('#myTable tr')。size()将返回相同的值。
加里·舒特勒

31
@Garry-文档指出长度比size()更可取,因为它更快。
tvanfosson

12
.size()内部调用.length
Redsquare

2
它具有length属性,因为它是一个数组。我对jQuery的历史了解不足,无法知道jQuery对象是否总是扩展数组。
tvanfosson

67
$('#myTable tbody tr')。length; 将计算那些只能在台体..
戴夫·劳伦斯

178

如果在表中使用<tbody><tfoot>,则必须使用以下语法,否则将获得不正确的值:

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

1
我正在使用<tbody>,但得到的值相同
Kreker 2012年

1
使用$('#myTable> tbody:last> tr')。length;
Riccardo Bassilichi 2012年

7
@DevlshOne,这是不正确的,长度不是零基,请查看文档:api.jquery.com/length
Mike

1
当您有嵌套表时,这只会计算指定表中的行,这正是我所需要的。
2013年

1
@ user12379095事情是这样的:stackoverflow.com/questions/32101764/...
AntonChanning

49

或者...

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

jsFiddle演示

这将确保不计算任何嵌套表行。


哦,因为索引然后返回-1。聪明。
Samuel Edwin Ward

1
谢谢。它们之间相差无几,但是聪明的解决方案确实会时不时地溜走。
DevlshOne

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()访问'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戴夫


8

如果有身体请尝试这个

没有标题

$("#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

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.