Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 10244

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Permalink

Apr 18th, 2009

Collect sum of a column in a html table?

Expand Post »

Hi

This is either really simple or completely impossible

I have a table like the following:

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

Designer_101

Reputation Points: 12

Solved Threads: 16

Posting Whiz

Offline

314 posts
since Jul 2007

Permalink

Apr 18th, 2009

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

you would do the following. Hope it helps.

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>

Fungus1487

Reputation Points: 66

Solved Threads: 56

Posting Pro in Training

Offline

459 posts
since Apr 2007

Permalink

Apr 18th, 2009

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

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:

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

Airshow

Sponsor

Reputation Points: 300

Solved Threads: 357

WiFi Lounge Lizard