Question

All right, here’s the setup: I have a table in a “form” whose contents I’m editing using the ContentEditable HTML attribute (set on the parent element of the table). There are four columns all together– two sets of “item description” columns and two sets of matching “price” columns, along with an area at the bottom where I’d like the for the total price to be displayed.

Problem #1 is that I’m not sure how to calculate the sum of numbers across cells when I’m not working with inputs and fields. Complicating things (at least to me) is that I’m adding rows to the table dynamically with Jquery.

Problem #2 is that the second set of description/price columns are optional– I’d like to be able to use an “Add” button to trigger individual items in those columns to be added to the total.

Edit: I tried some random things and have had some success by storing the values of the cells in an array, then telling Jquery to add the contents of that array and output the sum. The problem now is that it’s not giving me a sum, it’s giving me the array contents without whitespace. For example, if the array contains 1,2,3 it gives me 123 instead of 6.

Edit #2: After cobbling together bits and pieces of a half dozen tutorials, I’ve got something that works for Problem #1. Now on to problem #2!

var sumArray = []
            $('#calc').click(function(){ 
                $('table tbody tr').each(function() {
                    sumArray.push($(this).find('.cost').text().match(/\d+/));                       
                });
                var total = 0;
                for (var i = 0; i < sumArray.length; i++) {
                    total += parseInt(sumArray[i]);
                }
                $('.totalcost').text(total);

            });

Here’s the table code:

<table>
            <thead>
                <tr>
                        <th>Service</th>
                        <th>Cost</th>
                        <th>Complementary (Optional) Service</th>
                        <th>Cost</th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                <td class="cost"></td>
                    <td></td>
                    <td class="compcost"></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>

                        <th>Total</th>
                        <th class="totalcost"></th>

                </tr>
            </tfoot>
        </table>
        <span id="add">Add</span>
        <span id="remove">Remove</span>
        <span id="reset">Reset</span>
        <span id="nocomp">No Comps</span>
        <span id="calc">Calculate Total</span>
    </div>

And here’s the JS I’m using right now.

//Add fields to table
            var i = $('tbody>tr').size() + 1;

            $('#add').click(function() {
                if ($("tbody tr:first-child td").length > 2) {
                $('<tr><td></td><td class="cost"></td><td></td><td class="compcost"></td></tr>').fadeIn('slow').appendTo('tbody');
                i++;
                }
                else
                {$('<tr><td></td><td class="cost"></td></tr>').fadeIn('slow').appendTo('tbody');
                i++;
                };

            });

            $('#remove').click(function() {
            if(i > 1) {
                $('tbody>tr:last').remove();
                i--;
            }
            });

            $('#reset').click(function() {
            while(i > 2) {
                $('tbody>tr:last').remove();
                i--;
            }
            });

            $('#nocomp').click(function(){
                if ($("tbody tr td").length > 2) {
                $('thead tr th:nth-child(2),thead tr th:nth-child(3),tbody>tr td:nth-child(2),tbody>tr td:nth-child(3)').remove();
                }
            });

        /*$('#calc').click(function(){
            $('table tbody tr').each(function() {
            $(this).find('.totalcost').text(
            parseFloat($(this).find('.cost').text())
        );
            });
        });*/

        $('#calc').click(function(){ 
            $(this).find('table tbody tr td.cost').each(function(idx)
            {
                var total = $(this).text();
                count += total;                          
            });
            alert(parseInt(count));
        });

Answer 1

Take a look at this jsFiddle, it might be what you want:
http://jsfiddle.net/mPvyA/3/

I modified your buttons slightly to add/remove an included class then check for that on calculate:

        $('#exccomp').click(function(){
            $('table').find('.compcost').removeClass('included');
        });

        $('#inccomp').click(function(){
            $('table').find('.compcost').addClass('included');
        });

        $('#calc').click(function(){ 
            var sumArray = [];
            $('table tbody tr').each(function() {
                var $this = $(this), 
                    includedCompCost = $this.find('.compcost').filter('.included').text().match(/\d+/);
                sumArray.push($this.find('.cost').text().match(/\d+/)); 
                if (includedCompCost !== "") { sumArray.push(includedCompCost); }
            });
            var total = 0;
            for (var i = 0; i < sumArray.length; i++) {
                var parsedInt = parseInt(sumArray[i]); 
                if (!isNaN(parsedInt) && parsedInt > 0) { 
                   total += parsedInt; 
                } 
            }
            $('.totalcost').text(total);
        });​