On the Fly Table Calculations in HTML Form

Question

I have a simple HTML Form/Table with one column (Ranking) having a select menu with 2 options: Moderate or High. I need to find all rows where the cell in the Ranking column = "Moderate" and count the total of another cell in the same row (Average Hours/Week), and repeat this for all rows where the cell = "High". Here's a JS Fiddle showing a sample empty form/table:

http://jsfiddle.net/53zfb/4/

Note that the number of rows will not be fixed in advance - there could be 1 or more. I have a script that calculates the Average Hours/Week based on the inputs into the Hours/Week and Weeks/Year fields but can't get it to also calculate the Totals for each of the 2 Rankings.

Just to clarify if the form has these selections:

Row 1: Ranking = "Moderate" Average Hours/Week = 2
Row 2: Ranking = "High" Average Hours/Week = 4
Row 3: Ranking = "Moderate" Average Hours/Week = 6
Row 4: Ranking = "High" Average Hours/Week = 8

The Total Moderate cell should end up with a value of * (6 + 2) and the Total High cell should end up with a value of 12 (4+*). Ideally this would happen whenever the Ranking, Hours/Week or Weeks/Year values change for any row.

Here's what I've come up with so far that's not working for me:

var moderateTotal = 0;
        var highTotal = 0;
        $("#activities").find("tr").each(function() {
    var tr = $(this);
    var level = tr.find("td:nth-child(2)").html();
    var value = tr.find("td:nth-child(5)").html();

    switch(level)
    {
        case "Moderate":
            moderateTotal += value*1;
        break;
        case "High":
            highTotal += value*1;
        break;
    }
});

$("#moderateTotal").val(moderateTotal);
    $("#highTotal").val(highTotal);

    });

Answer 1

Consider changing your event to an onChange=MyFunc() within the <input> and <select> labels, then calling your function from that. The function would simply have to loop through your controls (which by your JSFiddle have incremented IDs already). An If statement would go through the loop of controls, finding all Risk#="Moderate" where Risk# is a UNIQUE ID (unlike your JSFiddle) for each Risk select group, and adding the appropriate values to a running sum.

You havn't asked anything specific here so I assumed you just needed some help with the idea, the specific code for this isn't difficult. You demonstrated some good coding knowledge with the JSFiddle.

Possible Javascript:

function MyOnChangeEvent() {
   var highTotal, modTotal;
   var rowCount, i;
   highTotal=0;
   modTotal=0;

   rowCount=5; //However many rows you have

   for (i=1; i<rowCount+1; i++) {
      switch (document.getElementById("C"+i)) {
         case "Moderate": modTotal++;
         case "High": highTotal++;
      }
   }

   document.getElementById("HighTotal") = highTotal;
   document.getElementById("ModerateTotal") = modTotal;
}

There's likely debugging in this as I didn't test it, but the idea is there. Get the values via document.getElementById(<ID OF TEXT BOXES>) and perform your calcs.