AJAX

Collect sum of a column in a html table?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2007

Posts: 258

Reputation: Designer_101 is an unknown quantity at this point

Solved Threads: 12

Designer_101 Designer_101 is offline

Offline

Posting Whiz in Training

Collect sum of a column in a html table?

Apr 18th, 2009

Hi

This is either really simple or completely impossible

I have a table like the following:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
 
<tr>
<td>7</td>
<td>9</td>
</tr>
 
<tr>
<td><<SUM OF THIS COLUMN (8)>></td>
<td><<SUM OF THIS COLUMN(11)>></td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>

<tr>
<td>7</td>
<td>9</td>
</tr>

<tr>
<td><<SUM OF THIS COLUMN (8)>></td>
<td><<SUM OF THIS COLUMN(11)>></td>
</tr>
</table>

I hope you understand what it is im asking. This is easy to do in mysql however can it be done in standard html/dhtml ?

Thanks

Did I help? Add to my reputation I need it :(

•

Join Date: Apr 2007

Posts: 437

Reputation: Fungus1487 is on a distinguished road

Solved Threads: 50

Fungus1487 Fungus1487 is offline

Offline

Posting Pro in Training

Re: Collect sum of a column in a html table?

Apr 18th, 2009

you would do the following. Hope it helps.

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<html>
    <head>
    </head>
    <body>
        <table id="countit">
            <tr>
                <td class="count-me">12</td>
                <td>Some value</td>
            </tr>
            <tr>
                <td class="count-me">2</td>
                <td>Some value</td>
            </tr>
            <tr>
                <td class="count-me">17</td>
                <td>Some value</td>
            </tr>
        </table>
        <script language="javascript" type="text/javascript">
            var tds = document.getElementById('countit').getElementsByTagName('td');
            var sum = 0;
            for(var i = 0; i < tds.length; i ++) {
                if(tds[i].className == 'count-me') {
                    sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
                }
            }
            document.getElementById('countit').innerHTML += '<tr> <td> ' + sum + '</td> <td> total</td> </tr> ';
        </script> 
    </body> 
</html> 
<html>
    <head>
    </head>
    <body>
        <table id="countit">
            <tr>
                <td class="count-me">12</td>
                <td>Some value</td>
            </tr>
            <tr>
                <td class="count-me">2</td>
                <td>Some value</td>
            </tr>
            <tr>
                <td class="count-me">17</td>
                <td>Some value</td>
            </tr>
        </table>
        <script language="javascript" type="text/javascript">
            var tds = document.getElementById('countit').getElementsByTagName('td');
            var sum = 0;
            for(var i = 0; i < tds.length; i ++) {
                if(tds[i].className == 'count-me') {
                    sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
                }
            }
            document.getElementById('countit').innerHTML += '<tr><td>' + sum + '</td><td>total</td></tr>';
        </script>
    </body>
</html>

When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design

•

Join Date: Apr 2009

Posts: 809

Reputation: Airshow is on a distinguished road

Solved Threads: 115

Airshow

Offline

Practically a Posting Shark

Re: Collect sum of a column in a html table?

Apr 18th, 2009

101,

The solution depends on why you need to do this?

If you build your table manually, then do the summation manually and type in the HTML for the totals row manually, complete with its values.

If your HTML is pasted from a spreadsheed, then get the spreadsheet to do the totals and paste in the total rows along with the other rows.

If you build the table dynamically, either server-side or client-side, then get the build script to do the summation and write the totals row as per the other rows.

If the values in the table occur in response to some sort of user interaction(s), then OK, use JavaScript to scan the table and write in the totals but that would require the calculation script to be triggered by the user event(s) in question (data entry/button press or whatever) rather than using a "one-off" script embedded in the HTML. Write the code as a javascript function and call it from event handler(s) as appropriate.

Also (from solution above), my IE6 (maybe other browsers) doesn't like document.getElementById('countit').innerHTML += '.....'; . It may work in Moz/Opera, I haven't tested. For me, it's better to add <tr><td id="total_1"></td><td id="total_2"></td></tr> to the bottom of the table (manually if that's how you write your HTML), then populate it from the calculation function. eg something like:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
document.getElementById('total_1').innerHTML = sum1;
document.getElementById('total_2').innerHTML = sum2;
document.getElementById('total_1').innerHTML = sum1;
document.getElementById('total_2').innerHTML = sum2;

This has the added advantage of allowing reuse; the function can be called more than once (per page-session) without adding a growing number total rows to the table, which is important if the purpose of all this is to respond to user events (in the plural).

Apart from that, and with my proviso about reuse, Fungus' script will work if a one-off, in-line calculation is what's required.

Hope this helps

Airshow

Quick Reply to Thread

Show Printable Version

Other Threads in the JavaScript / DHTML / AJAX Forum

Previous Thread: Problem with JavaScript!!! :(
Next Thread: input text update

Thread Tools	Search this Thread
Show Printable Version Email this Page

DaniWeb Message

Cancel Changes