www.webdeveloper.com
Results 1 to 13 of 13

Thread: Trouble with calculating value in tables

  1. #1
    Join Date
    Apr 2006
    Posts
    15

    Trouble with calculating value in tables

    Hello,

    I have a small sports league i'm doing in my home town. On the "Standings" page, i want to display the records of all the teams, and have a column which will calculate the winning percentage. here is the code i have for the table...

    <center><font color="#3366FF" size="+8"><u>WEST</u></font></center>
    <center><table style="color:#0000FF" border="2" bordercolorlight="#990000" bordercolordark="#333333" bgcolor="#CCCCCC">
    <tr><th colspan="100%" align="left"><font size="+3" color="#990000">Northern California</font></th></tr>
    <tr>
    <td width="20" align="center"></td>
    <td width="300">Team</td>
    <td width="30" align="center">W</td>
    <td width="30" align="center">L</td>
    <td width="50" align="center">Pct.</td>
    <td width="50" align="center">Streak</td>
    </tr>
    <tr>
    <td align="center">1</td>
    <td>786</td>
    <td align="center">11</td>
    <td align="center">1</td>
    <td align="center">.917</td>
    <td align="center">7W</td>
    </tr>
    <tr>
    <td align="center">2</td>
    <td>Kings Of Cali</td>
    <td align="center">10</td>
    <td align="center">2</td>
    <td align="center">.833</td>
    <td align="center">5W</td>
    </tr>
    <tr>
    <td align="center">3</td>
    <td>Bombs Away</td>
    <td align="center">9</td>
    <td align="center">3</td>
    <td align="center">.750</td>
    <td align="center">1W</td>
    </tr>
    <tr>
    <td align="center">4</td>
    <td>Rehab</td>
    <td align="center">6</td>
    <td align="center">6</td>
    <td align="center">.500</td>
    <td align="center">5W</td>
    </tr>
    <tr>
    <td align="center">5</td>
    <td>Team Alameda</td>
    <td align="center">5</td>
    <td align="center">7</td>
    <td align="center">.416</td>
    <td align="center">1L</td>
    </tr>
    <tr>
    <td align="center">6</td>
    <td>Da Bay</td>
    <td align="center">4</td>
    <td align="center">8</td>
    <td align="center">.333</td>
    <td align="center">1L</td>
    </tr>
    <tr>
    <td align="center">7</td>
    <td>Strokers</td>
    <td align="center">2</td>
    <td align="center">10</td>
    <td align="center">.166</td>
    <td align="center">3L</td>
    </tr>
    <tr>
    <td align="center">8</td>
    <td>Cal State Crew</td>
    <td align="center">1</td>
    <td align="center">11</td>
    <td align="center">.083</td>
    <td align="center">11L</td>
    </tr>

    </table></center>

    I know it looks pretty redundant. I dont know much about web developing. Thats why i signed up for this site. Is it possible to have the "pct" column automatically calculate the winning percentage of each team? I'd rather not do it all by hand.
    Any help would be appreciated.
    Thank you
    Powerpack80

  2. #2
    Join Date
    Mar 2006
    Location
    California
    Posts
    306
    I didn't test these, but they should work...

    Put this in your <head> section:
    Code:
    <script language="JavaScript">
    function addTeam(name,wins,losses,streak){
      if(typeof teams=="undefined") teams = new Array();
      percent = getPercent(wins,(wins+losses));
      teams[teams.length] = [(teams.length+1),name,wins,losses,percent,streak);
    }
    function getPercent(wins,total){
      p = wins/total;
      p *= 1000;
      p = parseInt(p);
      p /= 1000;
      return p;
    }
    
    //////  ADD TEAMS ///////
    // addTeam("NAME", WINS, LOSSES, "STREAK");
    addTeam("786",11,1,"7W");
    </script>
    And put this in your body, where you want the table to show up:
    Code:
    <script language="JavaScript">
    document.write("<table style="color:#0000FF" border="2" bordercolorlight="#990000" bordercolordark="#333333" bgcolor="#CCCCCC">");
    document.write("<tr><th colspan="100%" align="left"><font size="+3" color="#990000">Northern California</font></th></tr>");
    document.write("<tr><td width="20" align="center"></td><td width="300">Team</td><td width="30" align="center">W</td><td width="30" align="center">L</td><td width="50" align="center">Pct.</td><td width="50" align="center">Streak</td></tr>");
    for(i=0;i<teams.length;i++){
      document.write("<tr>");
      for(j=0:j<teams[i].length;j++){
        document.write("<td>"+teams[i][j]+"</td>");
      }
      document.write("</tr>");
    }
    </script>

  3. #3
    Join Date
    Apr 2006
    Posts
    15
    tried doing that, but nothing is coming up. I did not see a </table> tag. Did it work for you?
    Last edited by powerpack80; 04-27-2006 at 11:32 AM.

  4. #4
    Join Date
    Mar 2006
    Location
    California
    Posts
    306
    Opps, mismatched Quotes. Well, I am trying to fix it because it still isn't working. I am in school right now though...

  5. #5
    Join Date
    Apr 2006
    Posts
    15
    I'll be the first to admit, i know nothing about Javascript. But, i'm trying to slowly learn. I just made this up based on a few searches ive done...let me know what kind of errors i'll have...

    THIS GOES BETWEEN "HEAD" TAGS:

    <script type="text/javascript">
    <!--
    function Percentage()
    {
    return Math.divide(W/(W+L));
    }
    //-->


    This will go into the BODY tags, but more specifically inside the "TD" tag in the table. for each corresponding row...

    <script type="text/javascript">
    <!--
    var W =
    var L =
    document.write(Percentage());
    //-->
    </script>

    But somehow i gotta figure out how to set "var W =" to the value i put in the table. and the same for "var L =".
    But then again, i could be COMPLETELY off, and u could be laughing ur head off at me right now. lololol. Thank you for your help either way.
    Powerpack80

  6. #6
    Join Date
    Jan 2006
    Location
    I'm in GMT -5
    Posts
    561
    Try this instead. It's been tested in IE and FF. Copy it AS IS, then save it as an .html document.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    	function init(){
    
    		var startRow = 2;
    		if (navigator.appName != "Microsoft Internet Explorer"){startRow--}
    		var nTable = document.getElementsByTagName('table')[0];
    		var nRow = nTable.rows.length;
    		var nCell = nTable.rows[nRow-1].cells.length;
    		for (i=startRow; i<nRow; i++)
    			{
    			 nTable.rows[i].cells[4].lastChild.data = (((Number(nTable.rows[i].cells[2].lastChild.data) / (Number(nTable.rows[i].cells[2].lastChild.data) + Number(nTable.rows[i].cells[3].lastChild.data))).toFixed(3))*100).toFixed(1);
    			}
    	}
    
    	onload=init;
    
    </script>
    </head>
    <body>
    
    <center><font color="#3366FF" size="+8"><u>WEST</u></font></center>
    
    <table align="center" style="color:#0000FF" border="2" bordercolorlight="#990000" bordercolordark="#333333" bgcolor="#CCCCCC" cellspacing="0" cellpadding="5">
    <thead>
    <th colspan="6"><font size="+3" color="#990000">Northern California</font></th>
    </thead>
    <tbody>
    <tr>
    <td wdth="20" align="middle">&nbsp</td>
    <td width="300" align="middle">Team</td>
    <td width="30" align="middle">W</td>
    <td width="30" align="middle">L</td>
    <td width="50" align="middle">Pct.</td>
    <td width="50" align="middle">Streak</td>
    </tr>
    <tr>
    <td align="middle">1</td>
    <td>786</td>
    <td align="middle">11</td>
    <td align="middle">1</td>
    <td align="middle">&nbsp</td>
    <td align="middle">7W</td>
    </tr>
    <tr>
    <td align="middle">2</td>
    <td>Kings Of Cali</td>
    <td align="middle">10</td>
    <td align="middle">2</td>
    <td align="middle">&nbsp</td>
    <td align="middle">5W</td>
    </tr>
    <tr>
    <td align="middle">3</td>
    <td>Bombs Alostay</td>
    <td align="middle">9</td>
    <td align="middle">3</td>
    <td align="middle">&nbsp</td>
    <td align="middle">1W</td>
    </tr>
    <tr>
    <td align="middle">4</td>
    <td>Rehab</td>
    <td align="middle">6</td>
    <td align="middle">6</td>
    <td align="middle">&nbsp</td>
    <td align="middle">5W</td>
    </tr>
    <tr>
    <td align="middle">5</td>
    <td>Team Alameda</td>
    <td align="middle">5</td>
    <td align="middle">7</td>
    <td align="middle">&nbsp</td>
    <td align="middle">1L</td>
    </tr>
    <tr>
    <td align="middle">6</td>
    <td>Da Bay</td>
    <td align="middle">4</td>
    <td align="middle">8</td>
    <td align="middle">&nbsp</td>
    <td align="middle">1L</td>
    </tr>
    <tr>
    <td align="middle">7</td>
    <td>Strokers</td>
    <td align="middle">2</td>
    <td align="middle">10</td>
    <td align="middle">&nbsp</td>
    <td align="middle">3L</td>
    </tr>
    <tr>
    <td align="middle">8</td>
    <td>Cal State Crelost</td>
    <td align="middle">1</td>
    <td align="middle">11</td>
    <td align="middle">&nbsp</td>
    <td align="middle">11L</td>
    </tr>
    </tbody>
    </table>
    
    </body>
    </html>

  7. #7
    Join Date
    Apr 2006
    Posts
    15
    that worked just about perfectly.u definitely helped me out. thank you very much.

  8. #8
    Join Date
    Jan 2006
    Location
    I'm in GMT -5
    Posts
    561
    powerpack80:

    You're welcome. My NAME is James, please address me by it.

  9. #9
    Join Date
    Apr 2006
    Posts
    15
    James,
    Thank you again for that help. Now, i'm trying to understand the code you wrote...how can i make it work for 2 or more tables on the same page? I tried to repeat the table, but the pct. did not work on the 2nd table. I have 4 divisions, so i need to put 4 tables.

  10. #10
    Join Date
    Jan 2006
    Location
    I'm in GMT -5
    Posts
    561
    powerpack:

    I realized too late, that what you are trying to do is use the baseball type of statistic. Meaning, they are "batting 1000", and that equals, 1.000. Otherwise, the team's "record" should display as: .685, etc.

    The .Pct at the top of the column confused me. It's not a percentage if it's expressed as a decimal only. But, I'm splittin hairs.

    So, here's the revised code. I'll post the second revision to use it with multiple tables soon.

    And just to help you and others, don't piecemeal a problem. If you have multiple tables, then state that at the start.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    	function init(){
    
    		var startRow = 2;
    		var tmp = 0;
    		if (navigator.appName != "Microsoft Internet Explorer"){startRow--}
    		var nTable = document.getElementsByTagName('table')[0];
    		var nRow = nTable.rows.length;
    		for (i=startRow; i<nRow; i++)
    			{
    			 tmp = ((Number(nTable.rows[i].cells[2].lastChild.data) / (Number(nTable.rows[i].cells[2].lastChild.data) + Number(nTable.rows[i].cells[3].lastChild.data))).toFixed(3))
    			 if (tmp < 1)
    				{
    			 	 tmp  = tmp.split(".");
    				 nTable.rows[i].cells[4].lastChild.data = "."+tmp[1];
    				}
    			 if (tmp == 1)
    				{
    				 nTable.rows[i].cells[4].lastChild.data = "1.000";
    				}
    			}
    	}
    
    	onload=init;
    
    </script>
    </head>
    <body>
    
    <center><font color="#3366FF" size="+8"><u>WEST</u></font></center>
    
    <table align="center" style="color:#0000FF" border="2" bordercolorlight="#990000" bordercolordark="#333333" bgcolor="#CCCCCC" cellspacing="0" cellpadding="5">
    <thead>
    <th colspan="6"><font size="+3" color="#990000">Northern California</font></th>
    </thead>
    <tbody>
    <tr>
    <td wdth="20" align="middle">&nbsp</td>
    <td width="300" align="middle">Team</td>
    <td width="30" align="middle">W</td>
    <td width="30" align="middle">L</td>
    <td width="50" align="middle">Record</td>
    <td width="50" align="middle">Streak</td>
    </tr>
    <tr>
    <td align="middle">1</td>
    <td>786</td>
    <td align="middle">12</td>
    <td align="middle">0</td>
    <td align="middle">&nbsp</td>
    <td align="middle">7W</td>
    </tr>
    <tr>
    <td align="middle">2</td>
    <td>Kings Of Cali</td>
    <td align="middle">10</td>
    <td align="middle">2</td>
    <td align="middle">&nbsp</td>
    <td align="middle">5W</td>
    </tr>
    <tr>
    <td align="middle">3</td>
    <td>Bombs Alostay</td>
    <td align="middle">9</td>
    <td align="middle">3</td>
    <td align="middle">&nbsp</td>
    <td align="middle">1W</td>
    </tr>
    <tr>
    <td align="middle">4</td>
    <td>Rehab</td>
    <td align="middle">6</td>
    <td align="middle">6</td>
    <td align="middle">&nbsp</td>
    <td align="middle">5W</td>
    </tr>
    <tr>
    <td align="middle">5</td>
    <td>Team Alameda</td>
    <td align="middle">5</td>
    <td align="middle">7</td>
    <td align="middle">&nbsp</td>
    <td align="middle">1L</td>
    </tr>
    <tr>
    <td align="middle">6</td>
    <td>Da Bay</td>
    <td align="middle">4</td>
    <td align="middle">8</td>
    <td align="middle">&nbsp</td>
    <td align="middle">1L</td>
    </tr>
    <tr>
    <td align="middle">7</td>
    <td>Strokers</td>
    <td align="middle">2</td>
    <td align="middle">10</td>
    <td align="middle">&nbsp</td>
    <td align="middle">3L</td>
    </tr>
    <tr>
    <td align="middle">8</td>
    <td>Cal State Crelost</td>
    <td align="middle">1</td>
    <td align="middle">11</td>
    <td align="middle">&nbsp</td>
    <td align="middle">11L</td>
    </tr>
    </tbody>
    </table>
    
    </body>
    </html>

  11. #11
    Join Date
    Jan 2006
    Location
    I'm in GMT -5
    Posts
    561
    powerpack:

    Here's the code for as many tables as are on the page. Again, copy it AS IS, then save it as an .html document.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    	function init(){
    
    		var startRow = 2;
    		var tmp = 0;
    		if (navigator.appName != "Microsoft Internet Explorer"){startRow--}
    		var nTable = document.getElementsByTagName('table');
    		
    		for (n=0; n<nTable.length; n++)
    			{
    			 var nRow = nTable[n].rows.length;
    			 for (i=startRow; i<nRow; i++)
    				{
    			 	tmp = ((Number(nTable[n].rows[i].cells[2].lastChild.data) / (Number(nTable[n].rows[i].cells[2].lastChild.data) + Number(nTable[n].rows[i].cells[3].lastChild.data))).toFixed(3))
    			 	if (tmp < 1)
    					{
    			 	 	 tmp  = tmp.split(".");
    				 	 nTable[n].rows[i].cells[4].lastChild.data = "."+tmp[1];
    					 }
    				if (tmp == 1)
    					{
    				 	 nTable[n].rows[i].cells[4].lastChild.data = "1.000";
    					}
    				}
    			}
    	}
    
    	onload=init;
    
    </script>
    </head>
    <body>
    
    <center><font color="#3366FF" size="+8"><u>WEST</u></font></center>
    
    <table align="center" style="color:#0000FF" border="2" bordercolorlight="#990000" bordercolordark="#333333" bgcolor="#CCCCCC" cellspacing="0" cellpadding="5">
    <thead>
    <th colspan="6"><font size="+3" color="#990000">Northern California</font></th>
    </thead>
    <tbody>
    <tr>
    <td wdth="20" align="middle">&nbsp</td>
    <td width="300" align="middle">Team</td>
    <td width="30" align="middle">W</td>
    <td width="30" align="middle">L</td>
    <td width="50" align="middle">Record</td>
    <td width="50" align="middle">Streak</td>
    </tr>
    <tr>
    <td align="middle">1</td>
    <td>786</td>
    <td align="middle">12</td>
    <td align="middle">0</td>
    <td align="middle">&nbsp</td>
    <td align="middle">7W</td>
    </tr>
    <tr>
    <td align="middle">2</td>
    <td>Kings Of Cali</td>
    <td align="middle">10</td>
    <td align="middle">2</td>
    <td align="middle">&nbsp</td>
    <td align="middle">5W</td>
    </tr>
    <tr>
    <td align="middle">3</td>
    <td>Bombs Alostay</td>
    <td align="middle">9</td>
    <td align="middle">3</td>
    <td align="middle">&nbsp</td>
    <td align="middle">1W</td>
    </tr>
    <tr>
    <td align="middle">4</td>
    <td>Rehab</td>
    <td align="middle">6</td>
    <td align="middle">6</td>
    <td align="middle">&nbsp</td>
    <td align="middle">5W</td>
    </tr>
    <tr>
    <td align="middle">5</td>
    <td>Team Alameda</td>
    <td align="middle">5</td>
    <td align="middle">7</td>
    <td align="middle">&nbsp</td>
    <td align="middle">1L</td>
    </tr>
    <tr>
    <td align="middle">6</td>
    <td>Da Bay</td>
    <td align="middle">4</td>
    <td align="middle">8</td>
    <td align="middle">&nbsp</td>
    <td align="middle">1L</td>
    </tr>
    <tr>
    <td align="middle">7</td>
    <td>Strokers</td>
    <td align="middle">2</td>
    <td align="middle">10</td>
    <td align="middle">&nbsp</td>
    <td align="middle">3L</td>
    </tr>
    <tr>
    <td align="middle">8</td>
    <td>Cal State Crelost</td>
    <td align="middle">1</td>
    <td align="middle">11</td>
    <td align="middle">&nbsp</td>
    <td align="middle">11L</td>
    </tr>
    </tbody>
    </table>
    
    <br><br>
    
    <table align="center" style="color:#0000FF" border="2" bordercolorlight="#990000" bordercolordark="#333333" bgcolor="#CCCCCC" cellspacing="0" cellpadding="5">
    <thead>
    <th colspan="6"><font size="+3" color="#990000">Northern California</font></th>
    </thead>
    <tbody>
    <tr>
    <td wdth="20" align="middle">&nbsp</td>
    <td width="300" align="middle">Team</td>
    <td width="30" align="middle">W</td>
    <td width="30" align="middle">L</td>
    <td width="50" align="middle">Record</td>
    <td width="50" align="middle">Streak</td>
    </tr>
    <tr>
    <td align="middle">1</td>
    <td>786</td>
    <td align="middle">12</td>
    <td align="middle">0</td>
    <td align="middle">&nbsp</td>
    <td align="middle">7W</td>
    </tr>
    <tr>
    <td align="middle">2</td>
    <td>Kings Of Cali</td>
    <td align="middle">10</td>
    <td align="middle">2</td>
    <td align="middle">&nbsp</td>
    <td align="middle">5W</td>
    </tr>
    <tr>
    <td align="middle">3</td>
    <td>Bombs Alostay</td>
    <td align="middle">9</td>
    <td align="middle">3</td>
    <td align="middle">&nbsp</td>
    <td align="middle">1W</td>
    </tr>
    <tr>
    <td align="middle">4</td>
    <td>Rehab</td>
    <td align="middle">6</td>
    <td align="middle">6</td>
    <td align="middle">&nbsp</td>
    <td align="middle">5W</td>
    </tr>
    <tr>
    <td align="middle">5</td>
    <td>Team Alameda</td>
    <td align="middle">5</td>
    <td align="middle">7</td>
    <td align="middle">&nbsp</td>
    <td align="middle">1L</td>
    </tr>
    <tr>
    <td align="middle">6</td>
    <td>Da Bay</td>
    <td align="middle">4</td>
    <td align="middle">8</td>
    <td align="middle">&nbsp</td>
    <td align="middle">1L</td>
    </tr>
    <tr>
    <td align="middle">7</td>
    <td>Strokers</td>
    <td align="middle">2</td>
    <td align="middle">10</td>
    <td align="middle">&nbsp</td>
    <td align="middle">3L</td>
    </tr>
    <tr>
    <td align="middle">8</td>
    <td>Cal State Crelost</td>
    <td align="middle">1</td>
    <td align="middle">11</td>
    <td align="middle">&nbsp</td>
    <td align="middle">11L</td>
    </tr>
    </tbody>
    </table>
    
    </body>
    </html>

  12. #12
    Join Date
    Apr 2006
    Posts
    15
    James,

    Thank you again for your help. This works perfectly. I was trying to study the code you gave me, and see if i could figure it out myself. I almost had it...The line you added

    for (n=0; n<nTable.length; n++)

    instead, i had originally put n<nTable instead of n<nTable.length

    thank you again
    Noor

  13. #13
    Join Date
    Jan 2006
    Location
    I'm in GMT -5
    Posts
    561
    You're welcome, Noor. Take care. Good luck with the managing all that data.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles