Counting Rows in a Table

I want to count the rows in an html table as they are added. What's the easiest way using Javascript?

I only have 1 table in my document.  There are two rows with column headings that I don't want to be included in the count.
contesaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Pravin AsarPrincipal Systems EngineerCommented:
Assuming you know the table Object,

tblObj.rows.length gives a rows in the table.



Here is example which does color management for table rows.

<html>
<head>
<title>Alternate Table Row Colors</title>
</head>
<body>
<script language="javascript">
function AlternateColors(tblObj, colorStr) {
      if (!tblObj) { return; }
      var colors=colorStr.split(',');
      var cnt =1;
      for (var trs=0; trs < tblObj.rows.length; trs++) {
            trObj = tblObj.rows[trs];
            trObj.style.backgroundColor = colors[1-parseInt(cnt%2)];
            cnt++;
            if (cnt > 2) { cnt = 1; }
      }
}
</script>

<table id="table1" border="1">
<tr><td>row one</td></tr>
<tr><td>row two</td></tr>
<tr><td>row three</td></tr>
<tr><td>row four</td></tr>
<tr><td>row five</td></tr>
<tr><td>row six</td></tr>
<tr><td>row seven</td></tr>
<tr><td>row eight</td></tr>
</table>

<table id="table2">
      <tr><td>Row1 Cell 1</td><td>Row1 Cell 2</td></tr>
      <tr><td>Row2 Cell 1</td><td>Row2 Cell 2</td></tr>
      <tr><td>Row3 Cell 1</td><td>Row3 Cell 2</td></tr>
</table>
<script language="javascript">
AlternateColors(document.getElementById('table1'),"#CCFFAA, cyan");
AlternateColors(document.getElementById('table2'),"#CCCCCC, #00FFFF");
</script>
</body>
</html>
0
ZvonkoSystems architectCommented:
You add the rows to some parent. And that parent has an attribute: rows
That attribute is a collection and has an attribute: length
So the number of rows is:  rows.length

0
contesaAuthor Commented:
The script isn't working right for me. It only highlights the first row in the first table. I am not familiar with the table object.

Is there a shorter snippet of code that could count the rows?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

ZvonkoSystems architectCommented:
Show your statement how you add a row and I show you how to count rows.

0
contesaAuthor Commented:
<html><head>
 
<title>Test</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

//-->
</script>

</head>

<body>

<table name="list" id="list" width="700" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#0000FF">
 
  <tr>
    <td height="34" colspan="3" row=""><table width="100%" border="0">
     
     
      <tr>
        <td valign="bottom"><div align="left"><span class="style5">Total Count: </span></div>          <div align="right"><br>
            </div></td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td row=""><div align="left"><strong>Last Name </strong></div></td>
    <td row=""><div align="left"><strong>First Name </strong></div></td>
    <td row=""><div align="left"><strong>Photo Date </strong></div></td>
  </tr>
  <tr>
    <td colspan="3" row="">      <table width="100%" border="1" cellpadding="0" cellspacing="0">
        <tr>
          <td width="33%"><a href="docs/abedrabbo_qasem_012505.pdf">Abedrabbo</a></td>
          <td width="34%"><a href="docs/abedrabbo_qasem_012505.pdf">Qasem</a></td>
          <td width="33%"><a href="docs/abedrabbo_qasem_012505.pdf">01/25/05</a></td>
        </tr>
        <tr>
          <td><a href="docs/abuolba_shadi_022106.pdf">Abuolba</a></td>
          <td><a href="docs/abuolba_shadi_022106.pdf">Shadi</a></td>
          <td><a href="docs/abuolba_shadi_022106.pdf">02/21/06</a></td>
        </tr>
        <tr>
          <td><a href="docs/ackerman1_gary_022405.pdf">Ackerman(1)</a></td>
          <td><a href="docs/ackerman1_gary_022405.pdf">Gary</a></td>
          <td><a href="docs/ackerman1_gary_022405.pdf">02/24/05</a></td>
        </tr>
        <tr>
          <td><a href="docs/ackerman_gary_022405.pdf">Ackerman</a></td>
          <td><a href="docs/ackerman_gary_022405.pdf">Gary</a></td>
          <td><a href="docs/ackerman_gary_022405.pdf">02/24/05</a></td>
        </tr>
        <tr>
          <td><a href="docs/adams_donald_113005.pdf">Adams</a></td>
          <td><a href="docs/adams_donald_113005.pdf">Donald</a></td>
          <td><a href="docs/adams_donald_113005.pdf">11/30/05</a></td>
        </tr>
            </table></td>
  </tr>
</table>
</body>
</html>
0
ZvonkoSystems architectCommented:
Here you go:

<html><head>
 
<title>Test</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

//-->
</script>

</head>

<body>

<table name="list" id="list" width="700" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#0000FF">
 
  <tr>
    <td height="34" colspan="3" row=""><table width="100%" border="0">
     
     
      <tr>
        <td valign="bottom"><div align="left"><span class="style5">Total Count: <span id="count"></span></span></div>          <div align="right"><br>
            </div></td>      
        </tr>
    </table></td>
  </tr>
  <tr>
    <td row=""><div align="left"><strong>Last Name </strong></div></td>
    <td row=""><div align="left"><strong>First Name </strong></div></td>
    <td row=""><div align="left"><strong>Photo Date </strong></div></td>
  </tr>
  <tr>
    <td colspan="3" row="">      <table id="docs" width="100%" border="1" cellpadding="0" cellspacing="0">
        <tr>
          <td width="33%"><a href="docs/abedrabbo_qasem_012505.pdf">Abedrabbo</a></td>
          <td width="34%"><a href="docs/abedrabbo_qasem_012505.pdf">Qasem</a></td>
          <td width="33%"><a href="docs/abedrabbo_qasem_012505.pdf">01/25/05</a></td>
        </tr>
        <tr>
          <td><a href="docs/abuolba_shadi_022106.pdf">Abuolba</a></td>
          <td><a href="docs/abuolba_shadi_022106.pdf">Shadi</a></td>
          <td><a href="docs/abuolba_shadi_022106.pdf">02/21/06</a></td>
        </tr>
        <tr>
          <td><a href="docs/ackerman1_gary_022405.pdf">Ackerman(1)</a></td>
          <td><a href="docs/ackerman1_gary_022405.pdf">Gary</a></td>
          <td><a href="docs/ackerman1_gary_022405.pdf">02/24/05</a></td>
        </tr>
        <tr>
          <td><a href="docs/ackerman_gary_022405.pdf">Ackerman</a></td>
          <td><a href="docs/ackerman_gary_022405.pdf">Gary</a></td>
          <td><a href="docs/ackerman_gary_022405.pdf">02/24/05</a></td>
        </tr>
        <tr>
          <td><a href="docs/adams_donald_113005.pdf">Adams</a></td>
          <td><a href="docs/adams_donald_113005.pdf">Donald</a></td>
          <td><a href="docs/adams_donald_113005.pdf">11/30/05</a></td>
        </tr>
            </table></td>
  </tr>
</table>
<script>
document.getElementById("count").innerHTML=document.getElementById("docs").rows.length;
</script>
</body>
</html>

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Pravin AsarPrincipal Systems EngineerCommented:
Since you mentioned about getting row count, and not sure how you want to apply /use it.

Here is code, which applies my script to your HTML code,

<html>
<head>
 
<title>Test</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) {
            with (navigator) {
                  if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
                        document.MM_pgW=innerWidth;
                        document.MM_pgH=innerHeight;
                        onresize=MM_reloadPage;
                  }
                  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) {
                        location.reload();
                  }
            }
      }
}
function AlternateColors(tblObj, colorStr) {
     if (!tblObj) { return; }
     var colors=colorStr.split(',');
     var cnt =1;
     for (var trs=0; trs < tblObj.rows.length; trs++) {
          trObj = tblObj.rows[trs];
          trObj.style.backgroundColor = colors[1-parseInt(cnt%2)];
          cnt++;
          if (cnt > 2) { cnt = 1; }
     }
}
//-->
</script>

</head>

<body onLoad="MM_reloadPage(false);">

<table name="list" id="list" width="700" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#0000FF">
 
  <tr>
    <td height="34" colspan="3" row="">
            <table width="100%" border="0">
            <tr>
              <td valign="bottom"><div align="left"><span class="style5">Total Count: </span></div>                <div align="right"><br>
            </div>
                  </td>
        </tr>
            </table>
      </td>
  </tr>
  <tr>
    <td row=""><div align="left"><strong>Last Name </strong></div></td>
    <td row=""><div align="left"><strong>First Name </strong></div></td>
    <td row=""><div align="left"><strong>Photo Date </strong></div></td>
  </tr>
  <tr>
    <td colspan="3" row="">
            <table id="list2" width="100%" border="1" cellpadding="0" cellspacing="0">
        <tr>
          <td width="33%"><a href="docs/abedrabbo_qasem_012505.pdf">Abedrabbo</a></td>
          <td width="34%"><a href="docs/abedrabbo_qasem_012505.pdf">Qasem</a></td>
          <td width="33%"><a href="docs/abedrabbo_qasem_012505.pdf">01/25/05</a></td>
        </tr>
        <tr>
          <td><a href="docs/abuolba_shadi_022106.pdf">Abuolba</a></td>
          <td><a href="docs/abuolba_shadi_022106.pdf">Shadi</a></td>
          <td><a href="docs/abuolba_shadi_022106.pdf">02/21/06</a></td>
        </tr>
        <tr>
          <td><a href="docs/ackerman1_gary_022405.pdf">Ackerman(1)</a></td>
          <td><a href="docs/ackerman1_gary_022405.pdf">Gary</a></td>
          <td><a href="docs/ackerman1_gary_022405.pdf">02/24/05</a></td>
        </tr>
        <tr>
          <td><a href="docs/ackerman_gary_022405.pdf">Ackerman</a></td>
          <td><a href="docs/ackerman_gary_022405.pdf">Gary</a></td>
          <td><a href="docs/ackerman_gary_022405.pdf">02/24/05</a></td>
        </tr>
        <tr>
          <td><a href="docs/adams_donald_113005.pdf">Adams</a></td>
          <td><a href="docs/adams_donald_113005.pdf">Donald</a></td>
          <td><a href="docs/adams_donald_113005.pdf">11/30/05</a></td>
        </tr>
            </table></td>
  </tr>
</table>
<script language="javascript">
AlternateColors(document.getElementById('list'),"#CCFFAA, cyan");
AlternateColors(document.getElementById('list2'),"#CCCCCC, #00FF00");
</script>
</body>
</html>
 
0
contesaAuthor Commented:
Zvonko,

How do I display the total number of rows... how do I extract the results and display that number?

0
contesaAuthor Commented:
Pravinasar,

I like the alternate colors... I am going to give it a try now.
0
contesaAuthor Commented:
Pravinasar,

I copied and pasted your code and tested it... only the top row shows color. The other table (list2) is not showing any color at all.

0
contesaAuthor Commented:
Zvonko, the number is displaying - my oversight.  However, it is only displaying the number 1.
0
Pravin AsarPrincipal Systems EngineerCommented:
Remove the space between two colors .. copy these lines..
I found out FF does not mind leading blank for the second color, but IE does not like it.



AlternateColors(document.getElementById('list'),"#CCFFAA,cyan");
AlternateColors(document.getElementById('list2'),"#CCCCCC,#00FF00");
0
ZvonkoSystems architectCommented:
The id has to be in the INNER table: <table id="docs"
Like I did in my upper example.
0
contesaAuthor Commented:
Zvonko,

I copied it and pasted it into my document.  Still not working.

Can I ask you a question? What does "docs" refer to?
0
ZvonkoSystems architectCommented:
In my example is the "docs" the ID for the inner <table> containing five rows with the document names.

0
contesaAuthor Commented:
Pravinsar,

Your alternate colors for row function is working like a champ... Thanks..

Since the original question referred to the counting of the rows. How can I award you points?

Zvonko has been helping me with my original question.

0
contesaAuthor Commented:
Zvonko,

I figured it out... had to include my table id where "docs" was located.

Thank you.
0
ZvonkoSystems architectCommented:
You are welcome.
0
contesaAuthor Commented:
Pravinsar,

Please advise if you would like me to create another problem so that I can award you full point value for your solution.

Thank you very much guys!
0
Pravin AsarPrincipal Systems EngineerCommented:
Well it is up-to you.
 
Every thing has a purpose, and hence I showed with an example .

Also my first post mentioned..

>>Assuming you know the table Object,
>> tblObj.rows.length gives a rows in the table.

Points really does not matter to me.

Thanks,

0
contesaAuthor Commented:
Pravinsar,

You're right...

I'm going to start a new question and I'd like you to repost your solution and I will award you the points. You earned them... and I really appreciate your help.

:-)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.