Add values from table cells
<p>I have a table with digit values it its cells.</p>

<p>My objective is that by clicking on table cells and getting their values but adding them up as I click at will. It should keep track of the sum and show it in a separate <code>div</code>.</p>

<p>I have written code which handles clicking the <code>td</code> and adds a class which, among other things, changes the background color, necessary so that the user can see what he has clicked so far. Because classes are being added on the fly, I use <code>live()</code>.</p>

<p>Then I want to check on the fly the <code>td</code> that have the new class (called <code>selecting</code>) and add them up.</p>

<p>This is the code I have so far, but, first it does not add them up, rather, appends one after the other, and also in some weird order:</p>

<pre><code>$(document).ready(function() {
    total = '';

    $('td').click(function() {
        $(this).toggleClass('selecting');
        $('.selecting').live( {
            click: function() {
                if ($('td').hasClass('selecting')) {
                    total += $(this).html();
                }
            }
        })
        $('#feedback').text(total);
    });
})
</code></pre>

<p>A subsquent step would be that, on clicking again the <code>td</code> that were clicked, the sum is substracted for the value of the clicked again cell. So if newly clicked, adds, if clicked again, substracts, but that is like a second step, too difficult for me to do all at once first.</p>
