Link to home
Start Free TrialLog in
Avatar of contesa
contesaFlag for United States of America

asked on

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.
Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image
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>
Avatar of Zvonko
Zvonko
Flag of North Macedonia image
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

Avatar of contesa
contesa
Flag of United States of America image

ASKER

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?
Avatar of Zvonko
Zvonko
Flag of North Macedonia image
Show your statement how you add a row and I show you how to count rows.

Avatar of contesa
contesa
Flag of United States of America image

ASKER

<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>
ASKER CERTIFIED SOLUTION
Avatar of Zvonko
Zvonko
Flag of North Macedonia image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image
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>
 
Avatar of contesa
contesa
Flag of United States of America image

ASKER

Zvonko,

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

Avatar of contesa
contesa
Flag of United States of America image

ASKER

Pravinasar,

I like the alternate colors... I am going to give it a try now.
Avatar of contesa
contesa
Flag of United States of America image

ASKER

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.

Avatar of contesa
contesa
Flag of United States of America image

ASKER

Zvonko, the number is displaying - my oversight.  However, it is only displaying the number 1.
Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image
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");
Avatar of Zvonko
Zvonko
Flag of North Macedonia image
The id has to be in the INNER table: <table id="docs"
Like I did in my upper example.
Avatar of contesa
contesa
Flag of United States of America image

ASKER

Zvonko,

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

Can I ask you a question? What does "docs" refer to?
Avatar of Zvonko
Zvonko
Flag of North Macedonia image
In my example is the "docs" the ID for the inner <table> containing five rows with the document names.

Avatar of contesa
contesa
Flag of United States of America image

ASKER

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.

Avatar of contesa
contesa
Flag of United States of America image

ASKER

Zvonko,

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

Thank you.
Avatar of Zvonko
Zvonko
Flag of North Macedonia image
You are welcome.
Avatar of contesa
contesa
Flag of United States of America image

ASKER

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!
Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image
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,

Avatar of contesa
contesa
Flag of United States of America image

ASKER

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.

:-)