Question

I found some really good sum row, sum column of drop down examples, but nothing on sum row and grand total of drop downs. I’m not very good at jQuery but learning.

I have many rows of dropdowns for days of the week, each is a work shift. I need to total the row of shifts. Then sum the column of total hours.

I read that ‘select’ is not like an input so most of the sum row examples I saw did not work.

I need a working example like this. I’ll be using php to loop the rows so its important to address the rows (by id? by class?) Have pity and show a newbie how its done…thanks all.

Here is the table:

<table >
    <thead>
        <tr>
            <th></th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thur</th>
            <th>Fri</th>
            <th>Sat</th>
            <th>Sun</th>
            <th>Hours</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>r1</th>
            <td> <select>
        <option value="8">9-5</option>
        <option value="9">9-6</option>
        <option value="10">9-7</option>
        </select></td>
            <td> <select>
        <option value="8">9-5</option>
        <option value="9">9-6</option>
        <option value="10">9-7</option>
        </select></td>
          <td><select >
            <option value="8">9-5</option>
        <option value="9">9-6</option>
        <option value="10">9-7</option>
          </select></td>
            <td><select>
              <option value="8">9-5</option>
        <option value="9">9-6</option>
        <option value="10">9-7</option>
            </select></td>
            <td><select >
              <option value="8">9-5</option>
        <option value="9">9-6</option>
        <option value="10">9-7</option>
            </select></td>
            <td><select >
              <option value="8">9-5</option>
        <option value="9">9-6</option>
        <option value="10">9-7</option>
            </select></td>
            <td><select >
              <option value="8">9-5</option>
        <option value="9">9-6</option>
        <option value="10">9-7</option>
            </select></td>
            <td> 40</td>
        </tr>
        <tr>
            <th>r2</th>
            <td><select>
                <option value="8">9-5</option>
                <option value="9">9-6</option>
                <option value="10">9-7</option>
              </select>
            </td>
            <td><select>
                <option value="8">9-5</option>
                <option value="9">9-6</option>
                <option value="10">9-7</option>
              </select>
            </td>
            <td><select >
                <option value="8">9-5</option>
                <option value="9">9-6</option>
                <option value="10">9-7</option>
            </select></td>
            <td><select >
                <option value="8">9-5</option>
                <option value="9">9-6</option>
                <option value="10">9-7</option>
            </select></td>
            <td><select >
                <option value="8">9-5</option>
                <option value="9">9-6</option>
                <option value="10">9-7</option>
            </select></td>
            <td><select>
                <option value="8">9-5</option>
                <option value="9">9-6</option>
                <option value="10">9-7</option>
            </select></td>
            <td><select>
                <option value="8">9-5</option>
                <option value="9">9-6</option>
                <option value="10">9-7</option>
            </select></td>
          <td>40</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>s</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>80</td>
        </tr>
    </tfoot>
</table>

Answer 1

If you need to run it at once, there is a code example for your case:

$('table tbody tr').each(function(){
  var sum = 0;
  $('option:selected', this).attr('value', function(i,v){
    sum += parseInt(v);
  });

  $('td:last', this).text(sum)
})

Update – code with real-time click event and each and total sums recalculate

See work example here: http://jsfiddle.net/6HAPV/2

HoursSum = {
  table:    $('table'),
  row:      $('table tbody tr'),
  totalSum: $('table td:last'),

  init: function(){
    this.row.each(function(){
      HoursSum.calculate(this)
    });
    HoursSum.rebuildEvent();
    HoursSum.totalSumEvent();
  },

  rebuildEvent: function(){
    $('select', this.row).bind('change',function(){
      HoursSum.calculate($(this).parents('tr'));
    })
  },

  calculate: function(obj){
    var sum = 0;
    $('option:selected', obj).attr('value', function(i,v){
      sum += parseInt(v);
    });
    $('td:last', obj).text(sum);
    HoursSum.table.trigger('sumChanged', sum);
  },

  totalSumEvent: function(){
    HoursSum.table.bind('sumChanged', function(){
      v = 0;
      HoursSum.row.find('td:last').each(function(){
        v += parseInt($(this).text())
      })
      HoursSum.totalSum.text(v)
    });
  }
}

HoursSum.init()