?
Solved

Loop through HTML table and calculate field

Posted on 2007-10-17
10
Medium Priority
?
189 Views
Last Modified: 2008-01-09
Hi Experts,
I have a simple problem (I think).  I have a html table (15 rows 6 columns) that I need to loop through each row and check the value of the first cell (ddEarningsType1-15) and depending on the value need to add the value of the third cell (ddhours1-15) to one of 2 text fields (TotNormalHours, TotOTHours) and then sum the TotNormalHours and TotOTHours and populate TotHours text field.  Hope this makes since, but if you need more information just let me know.

TextField = TotNormalHours   TextField = TotOTHours   TextField = TotHours

EarningType     BillingCode     Hours
Normal                     4               8
OT                           45            2.5
0
Comment
Question by:pwtucker
  • 5
  • 5
10 Comments
 
LVL 17

Expert Comment

by:gops1
ID: 20095655
can you please explain your calculation part with an example
0
 
LVL 1

Author Comment

by:pwtucker
ID: 20096332
Sure...See if this makes sense below.  Basically I want to calculate the hours cell based on the type of earnings the user selects.  If the user selects normal hours as EarningsType then the hours cell would be added to the TotNormalHours text box and the TotHours text box.  If the user selects OT hours as EarningsType then the hours cell for that row would be added to the TotOTHours text box and the TotHours text box.  

Definitions:
EarningsType - Defines whether the record's hours are Over Time or Regular hours
BillingCode - Code that defines task
Hours - Hours user worked on this task
TotNormalHours - Regular hours worked.  Usually the first 40 hours, but not always.
TotOTHours - Over time hours worked.  Usually anything over 40 hours, but not always.
TotHours - All hours worked.  Regural hours + over time hours.

Switch(EarningsType)
{
   Case  Normal or Meeting:
      TotNormalHours = TotNormalHours + Hours
      TotHours = TotHours + Hours
      break
   Case OT or RoutineOT
      TotOTHours = TotOTHours + Hours
      TotHours = TotHours + TotOTHours
      break
}

Hopefully this makes sense.  The calculations is just summing the hours cell based on the earnings type.

Thanks for your help,
Paul
0
 
LVL 17

Expert Comment

by:gops1
ID: 20098610
Though I am not sure of the user Interface like what will be the input on the screen or anything that will be keyed in by user. Anyways we will start with this UI so that the requirements will get even more clearer. So here is it and try this out:

<html>
      <head>
            <title>Script Demo Gops&reg;</title>
            <style>body, table,input{font-family:verdana;font-size:xx-small;}</style>
            <script language="javascript">
                  function calculateOT(){
                        var tbl=document.getElementById('table');
                        for(var i=1;i<tbl.rows.length;i++){
                              var totNorm=40;
                              var totHrs=0
                              var totOT=0;
                              for(var j=0;j<1;j++){
                                    if(tbl.rows[i].cells[0].innerHTML=="Normal" || tbl.rows[i].cells[0].innerHTML=="Meeting"){
                                          totNorm=totNorm+parseInt(tbl.rows[i].cells[2].innerHTML);
                                          totHrs=totHrs+totNorm;
                                    }else{
                                          totOT=parseFloat(tbl.rows[i].cells[2].innerHTML);
                                          totHrs=parseFloat(totOT)+totNorm;
                                    }
                              }
                                    tbl.rows[i].cells[3].childNodes[0].value=totNorm;
                                    tbl.rows[i].cells[4].childNodes[0].value=totOT;
                                    tbl.rows[i].cells[5].childNodes[0].value=totHrs;
                        }
                  }
            </script>
      </head>
      <body>
            <table width="85%" border="1" cellpadding="0" cellspacing="0" id="table">
                  <tr>
                        <th>EarningType</th>
                        <th>BillingCode</th>
                        <th>Hours</th>
                        <th>TotNormalHours</th>
                        <th>TotOTHours</th>
                        <th>TotHours</th>
                  </tr>
                  <tr>
                        <td>Normal</td>
                        <td>4</td>
                        <td>8</td>
                        <td><input type="text" value="" style="background-color:#cccccc;" readonly=true></td>
                        <td><input type="text" value="" style="background-color:#cccccc;" readonly=true></td>
                        <td><input type="text" value="" style="background-color:#cccccc;" readonly=true></td>
                  </tr>

                  <tr>
                        <td>OT</td>
                        <td>45</td>
                        <td>2.5</td>
                        <td><input type="text" value="" style="background-color:#cccccc;" readonly=true></td>
                        <td><input type="text" value="" style="background-color:#cccccc;" readonly=true></td>
                        <td><input type="text" value="" style="background-color:#cccccc;" readonly=true></td>
                  </tr>

            </table>
            <br>
            <input type="button" value="Calculate" onClick="calculateOT();">
      </body>
</html>
0
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.

 
LVL 17

Expert Comment

by:gops1
ID: 20098611
just click the calculate button
0
 
LVL 1

Author Comment

by:pwtucker
ID: 20100601
I am going to give this a shot.  The user enters information via a dropdown list in the cell.  The earnings type is text and the hours is .5 - 24 in .5 increments.  Not sure if that changes how to reference the value in the cell.
0
 
LVL 1

Author Comment

by:pwtucker
ID: 20100788
having trouble getting the dropdown value from the cell.

this is a dropdown - tbl.rows[i].cells[0].innerHTML
this is a dropdown - tbl.rows[i].cells[3].childNodes[0].value

It is giving me <STRONG><FONT face="Arial Narrow" size=2> Earnings Type</FONT></STRONG>

0
 
LVL 17

Accepted Solution

by:
gops1 earned 2000 total points
ID: 20106598
A further progress. Check this code:

<html>
      <head>
            <title>Script Demo Gops&reg;</title>
            <style>body, table,input, select{font-family:verdana;font-size:xx-small;}</style>
            <script language="javascript">
                  function calculateOT(){
                        var tbl=document.getElementById('table');
                        for(var i=1;i<tbl.rows.length;i++){
                              var totNorm=40;
                              var totHrs=0
                              var totOT=0;
                              var hrsObj=tbl.rows[i].cells[2].childNodes[0];
                              var earnObj=tbl.rows[i].cells[0].childNodes[0];
                              if(earnObj.selectedIndex==0){
                                    alert("Choose Earning Type");
                                    earnObj.focus();
                                    return false;
                              }
                              if(hrsObj.selectedIndex==0){
                                    alert("Choose Hours");
                                    hrsObj.focus();
                                    return false;
                              }
                              if(earnObj[earnObj.selectedIndex].value=="Normal" || earnObj[earnObj.selectedIndex].value=="Meeting"){
                                    totNorm=totNorm+parseFloat(hrsObj[hrsObj.selectedIndex].value);
                                    totHrs=totHrs+totNorm;
                              }else{
                                    totOT=parseFloat(hrsObj[hrsObj.selectedIndex].value);
                                    totHrs=parseFloat(totOT)+totNorm;
                              }
                              tbl.rows[i].cells[3].childNodes[0].value=totNorm;
                              tbl.rows[i].cells[4].childNodes[0].value=totOT;
                              tbl.rows[i].cells[5].childNodes[0].value=totHrs;

                        }
                  }
            </script>
      </head>
      <body>
            <table width="85%" border="1" cellpadding="0" cellspacing="0" id="table">
                  <tr>
                        <th>EarningType</th>
                        <th>BillingCode</th>
                        <th>Hours</th>
                        <th>TotNormalHours</th>
                        <th>TotOTHours</th>
                        <th>TotHours</th>
                  </tr>
                  <tr>
                        <td>
                              <select>
                                    <option value="-1">--Select--</option>
                                    <option value="Normal">Normal</option>
                                    <option value="OT">OT</option>
                              </select>
                        </td>
                        <td>4</td>
                        <td>
                              <select>
                                    <option value="-1">--Select--</option>
                                    <option value="0.5">0.5</option>
                                    <option value="1.0">1.0</option>
                                    <option value="1.5">1.5</option>
                                    <option value="2.0">2.0</option>
                                    <option value="2.5">2.5</option>
                                    <option value="3.0">3.0</option>
                                    <option value="3.5">3.5</option>
                                    <option value="4.0">4.0</option>
                                    <option value="4.5">4.5</option>
                                    <option value="5.0">5.0</option>
                                    <option value="5.5">5.5</option>
                                    <option value="6.0">6.0</option>
                                    <option value="6.5">6.5</option>
                                    <option value="7.0">7.0</option>
                                    <option value="7.5">7.5</option>
                                    <option value="8.0">8.0</option>
                                    <option value="8.5">8.5</option>
                                    <option value="9.0">9.0</option>
                                    <option value="9.5">9.5</option>
                                    <option value="10.0">10.0</option>
                              </select>
                        </td>
                        <td><input type="text" value="" style="background-color:#cccccc;" readonly=true></td>
                        <td><input type="text" value="" style="background-color:#cccccc;" readonly=true></td>
                        <td><input type="text" value="" style="background-color:#cccccc;" readonly=true></td>
                  </tr>

                  <tr>
                        <td>
                              <select>
                                    <option value="-1">--Select--</option>
                                    <option value="Normal">Normal</option>
                                    <option value="OT">OT</option>
                              </select>
                        </td>
                        <td>45</td>
                        <td>
                              <select>
                                    <option value="-1">--Select--</option>
                                    <option value="0.5">0.5</option>
                                    <option value="1.0">1.0</option>
                                    <option value="1.5">1.5</option>
                                    <option value="2.0">2.0</option>
                                    <option value="2.5">2.5</option>
                                    <option value="3.0">3.0</option>
                                    <option value="3.5">3.5</option>
                                    <option value="4.0">4.0</option>
                                    <option value="4.5">4.5</option>
                                    <option value="5.0">5.0</option>
                                    <option value="5.5">5.5</option>
                                    <option value="6.0">6.0</option>
                                    <option value="6.5">6.5</option>
                                    <option value="7.0">7.0</option>
                                    <option value="7.5">7.5</option>
                                    <option value="8.0">8.0</option>
                                    <option value="8.5">8.5</option>
                                    <option value="9.0">9.0</option>
                                    <option value="9.5">9.5</option>
                                    <option value="10.0">10.0</option>
                              </select>
                        </td>
                        <td><input type="text" value="" style="background-color:#cccccc;" readonly=true></td>
                        <td><input type="text" value="" style="background-color:#cccccc;" readonly=true></td>
                        <td><input type="text" value="" style="background-color:#cccccc;" readonly=true></td>
                  </tr>

            </table>
            <br>
            <input type="button" value="Calculate" onClick="calculateOT();">
      </body>
</html>
0
 
LVL 1

Author Comment

by:pwtucker
ID: 20123103
Thanks gops1 this worked great (had to tweak a little).  Let me ask one more question.  Instead of looping through the table is there a way I can validate and calculate as the user enters the data?  For example, they select an earnings type and on the change event I check the type and enable/disable my dropdowns (not all earnings type require hours or code such as mileage or meals).  Then after the user selects their hours I calculate.  Is this possible?  If I need to give more points I will.  

Thanks for all your help.
0
 
LVL 17

Assisted Solution

by:gops1
gops1 earned 2000 total points
ID: 20123360
Removed the loop.. here is the new code


<html>
      <head>
            <title>Script Demo Gops&reg;</title>
            <style>body, table,input, select{font-family:verdana;font-size:xx-small;}</style>
            <script language="javascript">
                  function calculateOT(o,n){
                                      var totNorm=40;
                                      var totHrs=0
                                      var totOT=0;
                                      var o=document.getElementById(o+n);
                                      var et=document.getElementById("row"+n);
                                      if(et.selectedIndex==0){
                                                alert("Choose Earning Type");
                                                et.focus();
                                                return false;
                                      }
                                      if(o.selectedIndex==0){
                                                alert("Choose Hours");
                                                o.focus();
                                                return false;
                                      }

                                      if(et[et.selectedIndex].value=="Normal" || et[et.selectedIndex].value=="Meeting"){
                                                totNorm=totNorm+parseFloat(o[o.selectedIndex].value);
                                                totHrs=totHrs+totNorm;
                                      }else{
                                                totOT=parseFloat(o[o.selectedIndex].value);
                                                totHrs=parseFloat(totOT)+totNorm;
                                      }
                                      document.getElementById("totNorm"+n).value=totNorm;
                                      document.getElementById("totOtHr"+n).value=totOT;
                                      document.getElementById("totHrs"+n).value=totHrs;

                  }

                  function reset(o,n,s){
                                    var o=document.getElementById(o+n);
                                    o.selectedIndex=0;
                                    o.disabled=false;
                                    if(s[s.selectedIndex].value=="Meals" || s[s.selectedIndex].value=="Mileage"){
                                          o.disabled=true;
                                    }
                  }
            </script>
      </head>
      <body>
            <table width="85%" border="1" cellpadding="0" cellspacing="0" id="table">
                  <tr>
                        <th>EarningType</th>
                        <th>BillingCode</th>
                        <th>Hours</th>
                        <th>TotNormalHours</th>
                        <th>TotOTHours</th>
                        <th>TotHours</th>
                  </tr>
                  <tr>
                        <td>
                              <select id="row1" onchange="reset('hrs',1,this)">
                                    <option value="-1">--Select--</option>
                                    <option value="Normal">Normal</option>
                                    <option value="OT">OT</option>
                                    <option value="Meals">Meals</option>
                                    <option value="Mileage">Mileage</option>
                              </select>
                        </td>
                        <td>4</td>
                        <td>
                              <select id="hrs1" onchange="calculateOT('hrs',1)">
                                    <option value="-1">--Select--</option>
                                    <option value="0.5">0.5</option>
                                    <option value="1.0">1.0</option>
                                    <option value="1.5">1.5</option>
                                    <option value="2.0">2.0</option>
                                    <option value="2.5">2.5</option>
                                    <option value="3.0">3.0</option>
                                    <option value="3.5">3.5</option>
                                    <option value="4.0">4.0</option>
                                    <option value="4.5">4.5</option>
                                    <option value="5.0">5.0</option>
                                    <option value="5.5">5.5</option>
                                    <option value="6.0">6.0</option>
                                    <option value="6.5">6.5</option>
                                    <option value="7.0">7.0</option>
                                    <option value="7.5">7.5</option>
                                    <option value="8.0">8.0</option>
                                    <option value="8.5">8.5</option>
                                    <option value="9.0">9.0</option>
                                    <option value="9.5">9.5</option>
                                    <option value="10.0">10.0</option>
                              </select>
                        </td>
                        <td><input type="text" id="totNorm1" value="" style="background-color:#cccccc;" readonly=true></td>
                        <td><input type="text" id="totOtHr1" value="" style="background-color:#cccccc;" readonly=true></td>
                        <td><input type="text" id="totHrs1" value="" style="background-color:#cccccc;" readonly=true></td>
                  </tr>

                  <tr>
                        <td>
                              <select id="row2" onchange="reset('hrs',2,this)">
                                    <option value="-1">--Select--</option>
                                    <option value="Normal">Normal</option>
                                    <option value="OT">OT</option>
                                    <option value="Meals">Meals</option>
                                    <option value="Mileage">Mileage</option>
                              </select>
                        </td>
                        <td>45</td>
                        <td>
                              <select id="hrs2" onchange="calculateOT('hrs',2)">
                                    <option value="-1">--Select--</option>
                                    <option value="0.5">0.5</option>
                                    <option value="1.0">1.0</option>
                                    <option value="1.5">1.5</option>
                                    <option value="2.0">2.0</option>
                                    <option value="2.5">2.5</option>
                                    <option value="3.0">3.0</option>
                                    <option value="3.5">3.5</option>
                                    <option value="4.0">4.0</option>
                                    <option value="4.5">4.5</option>
                                    <option value="5.0">5.0</option>
                                    <option value="5.5">5.5</option>
                                    <option value="6.0">6.0</option>
                                    <option value="6.5">6.5</option>
                                    <option value="7.0">7.0</option>
                                    <option value="7.5">7.5</option>
                                    <option value="8.0">8.0</option>
                                    <option value="8.5">8.5</option>
                                    <option value="9.0">9.0</option>
                                    <option value="9.5">9.5</option>
                                    <option value="10.0">10.0</option>
                              </select>
                        </td>
                        <td><input type="text" id="totNorm2" value="" style="background-color:#cccccc;" readonly=true></td>
                        <td><input type="text" id="totOtHr2" value="" style="background-color:#cccccc;" readonly=true></td>
                        <td><input type="text" id="totHrs2"  value="" style="background-color:#cccccc;" readonly=true></td>
                  </tr>

            </table>
      </body>
</html>
0
 
LVL 1

Author Comment

by:pwtucker
ID: 20125661
Thanks gops1.  Not only did you solve my problem, I also learned a little bit in the process.  The bad thing is now I am going after more functionality, but will post another question.  
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Suggested Courses

830 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