Printing rows count above each table

Question

I need your help and assistant in viewing the number of rows on each printed table at the top of it.

I am using the below code to get the rows count:

    function count()
    {

    var tables = document.getElementsByClassName("tablesorter");
    var rows;
    for (var i = 0; i < tables.length; i++) {
      rows = tables[i].rows.length-1;
      alert(rows);
      span.innerHTML = rows;
    }

Currently the rows number are displayed in alerts and I want the number of the rows to be displayed in the html. I am printing the tables through while loop based on the retrieved values from the DB and they are having the same class and name. The class name is tablesorter and the id is detailsid .

I tried to print the number of the rows in the span, however it prints only above the first table. It prints first 22 and then it was overwrited with 30 where the 30 should be printed above the second table. Here is my code for printing

<%
while (rs.next())
        {

        count=0;
        name=rs.getString("name");   

        if (!(subcategory_name1).equals(temp_subcategory_name) )
            {
            i=0;                         
%>
<span id='span'></span>
<table class="tablesorter" id="detailsTable" width="80%">
<b>
<font style="font-size: 9pt" face="Arial" color="#162650"><%=category_name1%> / <%=subcategory_name1%> </font>
</b>
           <thead>
        <tr>
            <th>No.</th>
            <th>Name</th>
        </tr>
    </thead>
<%
}
%>
        <tbody>
<tr>
            <td><%=i%></td>
            <td align=left><%=name%></td>
</tr>
</tbody>

Kindly assit me in printing the number of the rows above each table

Answer 1

As i can see your code you are first assigning the

rows = tables[i].rows.length-1;

and then using it to assign rows to span so every time it changes it will be reflected in all the spans

so you can directly assign the value tables[i].rows.length-1; to the span

no need to use a variable row