jQuery：计算表格中的行数

Question

如何使用jQuery计算表格中tr元素的数量？

我知道有一个类似的问题，但我只想知道总行数。

- danjan

Answer 1

使用一个可以选择所有行并获取长度的选择器。

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

注意：此方法还会计算每个嵌套表格的所有行。

- tvanfosson

---

$('#myTable tr').size() 将会返回相同的值。 - Garry Shutler

@Garry -- 文档显示长度比size()更快，因此推荐使用长度。 - tvanfosson

.size() 调用 .length 内部。 - redsquare

它有一个长度属性，因为它是一个数组。我不知道 jQuery 的历史是否总是扩展了一个数组对象。 - tvanfosson

这份代码还会计算表头中的tr元素数量，而$('#myTable tbody tr').length;只会计算表格主体中的tr元素数量。为获取表格主体中的tr数量，请使用该代码。 - Dave Lawrence

Answer 2

如果在表格中使用了<tbody>或<tfoot>，则必须使用以下语法，否则将得到不正确的值:

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

- James Moberg

---

我正在使用<tbody>，但是我得到了相同的值。 - Kreker

使用 $('#myTable >tbody:last >tr').length; - Riccardo Bassilichi

@DevlshOne，那不是真的，长度不是以零为基础的，请查阅文档：http://api.jquery.com/length/ - Miguel

当您有嵌套表格时，这将仅计算指定表格中的行数，这正是我所需要的。 - GilShalit

@user12379095 像这样的东西：https://stackoverflow.com/questions/32101764/trouble-getting-count-of-table-rows-that-contain-certain-text - AntonChanning

Answer 3

或者...

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

jsFiddle演示

这将确保不会同时计算任何嵌套的表格行。

- DevlshOne

---

哦，因为这样索引会返回-1。聪明。 - Samuel Edwin Ward

谢谢。虽然聪明的解决方案很少，但偶尔也会有一些。 - DevlshOne

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

忽略<thead>行和嵌套表格行。不错。http://jsfiddle.net/6v67a/1576/ - Katrina

如果最后一个<td>包含内部表格，则返回该表格的行数！http://jsfiddle.net/6v67a/1678/ - Shaunak Shukla

Answer 4

我从表格中获取属性行，并为该集合获取其长度：

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

我觉得 jQuery 的效果变差了。

- jjroman

---

+1 - 适用于传递包含表格的元素的情况，例如 var rowCount = $(element).attr('rows').length; - Nicholas Murray

使用 JQuery v1.9.0，我必须使用prop()方法来访问“rows”属性：$("#myTable").prop('rows').length;（Chromium 24） - nvcnvn

Answer 5

这是我的看法：

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

---

非常好的函数 @Ricky G，可以用于许多事情，例如可以调用此函数来处理后端生成的 HTML，而不仅仅是 DOM。谢谢。 - Dhaval dave

Answer 6

我得到了以下内容：

jQuery('#tableId').find('tr').index();

- chifliiiii

---

加1以获取行数。 - Oli

Answer 7

如果有tbody，可以尝试这个

无表头

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

如果有标题，则：

如果有标题，则

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

享受!!!

- BornToCode

---

在 chidlren 后面缺少 () => $("#myTable > tbody").children().length - DrB

表头应该被包含在<thead>标签中，而且应该放在<tbody>标签之前。因此，如果表格按照标准进行设计，就不需要使用-1。 - ilpelle

问题是，当datatable没有记录时，它显示长度为1，因为datatable在datatable中呈现一个带有类“odd”的空行。 - Syed Ali

我在一个用户脚本中有一个动态表格，这是唯一有效的解决方案。 - brasofilo

Answer 8

如果您想计算不包括表头和嵌套表格中的任何行的行数，我发现以下方法非常有效：

var rowCount = $("#tableData > tbody").children().length;

- Zoe

---

如何修改以计算列？ - ePandit

Answer 9

我需要在 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>

显然，这只是一个快速示例，但可能会有所帮助。

- dennismonsewicz

Answer 10

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

- Cybernetic