Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Counting Rows in a Table

Posted on 2006-04-26
21
Medium Priority
?
477 Views
Last Modified: 2012-06-27
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.
0
Comment
Question by:contesa
  • 11
  • 6
  • 4
21 Comments
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16546327
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 16546440
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
 

Author Comment

by:contesa
ID: 16546485
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 63

Expert Comment

by:Zvonko
ID: 16546517
Show your statement how you add a row and I show you how to count rows.

0
 

Author Comment

by:contesa
ID: 16546549
<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
 
LVL 63

Accepted Solution

by:
Zvonko earned 2000 total points
ID: 16546657
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
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16546805
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
 

Author Comment

by:contesa
ID: 16562120
Zvonko,

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

0
 

Author Comment

by:contesa
ID: 16562125
Pravinasar,

I like the alternate colors... I am going to give it a try now.
0
 

Author Comment

by:contesa
ID: 16562266
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
 

Author Comment

by:contesa
ID: 16562333
Zvonko, the number is displaying - my oversight.  However, it is only displaying the number 1.
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16562379
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 16562600
The id has to be in the INNER table: <table id="docs"
Like I did in my upper example.
0
 

Author Comment

by:contesa
ID: 16562955
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 16562962
In my example is the "docs" the ID for the inner <table> containing five rows with the document names.

0
 

Author Comment

by:contesa
ID: 16562970
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
 

Author Comment

by:contesa
ID: 16563016
Zvonko,

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

Thank you.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16563042
You are welcome.
0
 

Author Comment

by:contesa
ID: 16563045
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
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16563133
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
 

Author Comment

by:contesa
ID: 16563569
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question