CODEWITHSUNDEEP
javascriptjqueryhtml
user982124
user982124

Reputation: 4610

Total Value in HTML Form Table from Select Menu

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

http://jsfiddle.net/8hn2H/

In this example the result for Total Moderate would be 1.6 and the result for Total High would be 8.7 (it's totalling the value in the Average Hours/Week column). The number of rows will not be fixed in advance - there could be 1 or more.

Here's the actual html for the form:

<div class="span8"><br>
      <table id="activities" class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Activity</th>
            <th>Risk</th>
            <th>Hours/Week</th>
            <th>Weeks/Year</th>
            <th>Average Hours/Week</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input name="Activity"  id="Activity" type="text" value=""/></td>
            <td><div class="controls">
              <select id="Risk">
                <option></option>
                <option>Moderate</option>
                <option>High</option>
              </select>
            </div></td>
            <td><input class="span1" id="A1" type="text" value=""/></td>
            <td><input class="span1" id="B1" type="text" value=""/></td>
            <td><input class="span1" id="C1" type="text" value=""/></td>
            <td><button class="btn">Delete Activity</button></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>Total Moderate</td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>Total High</td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>

Upvotes: 0

Views: 703

Answers (2)

bpeterson76
bpeterson76

Reputation: 12870

There are a number of ways to attack this, but I'd strongly recommend that you consider jQuery DataTables. It has built in functionality for summing fields, sorting, filtering, etc and is MUCH easier than having to home-brew something. Plus, it looks far better than just a bare table with full Themeroller support.

Here's a simple example with a footer callback to do sums: http://datatables.net/release-datatables/examples/advanced_init/footer_callback.html

Because all of the data in the table is fully available to you via API, it's easy to do math on it. You --could-- simply filter the table based on the the moderate or high flag and show only that data, allowing the user to modify that view on the fly.

And, if your data ever gets really long, it has paging and ajax loading options to improve the speed on the user's level.

Upvotes: 1

sachleen
sachleen

Reputation: 31131

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;
    }
});

$("#activities tr:last td:last").prev().html("High Total: " + highTotal);
$("#activities tr:last").prev().find("td:last").prev().html("Moderate Total: " + moderateTotal);

I use jQuery's .find() and .each() function to iterate over each row. I use find again to find the level and value (2nd and 5th columns) and a switch statement to add the value to the totals. I need to do value*1 to convert the string to an integer so it will add. Default behavior here is concatenate.

The last two lines set the value of the table cells. It'd be a lot easier if you could just give those a specific ID so you can just do $("moderateTotal").html() but since that wasn't given I used some jQuery selectors to do it.

Demo

Upvotes: 1

Related Questions