Question

我在同一页面上有多个表格，并且想要添加每个表格的行显示计数，如下所示。我尝试了一些东西，但它给出了所有表行的总数。

<table>
 <tr>
   <td>Some data</td>
   <td>More data</td>
 </tr>
 <tr>
   <td>Some data</td>
   <td>More data</td>
 </tr>
</table>

<table>
 <tr>
   <td>Some data</td>
   <td>More data</td>
 </tr>
 <tr>
   <td>Some data</td>
   <td>More data</td>
 </tr>
</table>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 $().ready(function(){

  //I want to add a line after each table showing each table row count
  $("table").after(??? + " rows found.");
 });
</script>

Answer 1

$("table").each(function(){
    $(this).after($(this).find('tr').length + " rows found.");    
})

Working Fiddle

Answer 2

你可以很容易地得到行数：

// loop over all tables
$("table").each(function(){ 
    // get number of rows, uses jQuery's context parameters to speed things up
    // (it is apparently somewhat faster than using 'find' in most cases)
    var nrOfRows = $("tr", this).length;

    $(this).after(nrOfRows + " rows found");
});

Working DEMO

更新当然，您可以在更少的行中执行此操作，我将其拆分以使用注释更清晰。你可以写：

$("table").each(function(){ 
    $(this).after($("tr", this).length + " rows found");
});

Answer 3

这个怎么样？

$("table").each(function(){
    $(this).after($(this).find('tr').length + " rows found.")
});

修改

要从最后一个表后的两个表中获取总数：

$('table:last').after($('tr').length + " rows found.")

Answer 4

根据需要，不使用.each()循环，仅使用after()。

$("table").after(function(){
    return $('tr', this).length + " rows found.";    
});

的 The demo 的

Answer 5

我建议：

$('table tbody').each(
    function(){
        var tfoot = $('<tfoot />', {'class' : 'rowSummary'}).insertBefore($(this)),
            tr = $('<tr />').appendTo(tfoot),
            len = $(this).find('tr').length,
            cell = $('<td />',{'colspan' : '2' }).text(len).appendTo(tr);
    });

JS Fiddle demo

拥有多个表时，获取每个表中的行数

5 个答案: