Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Totaling column and row data with javascript

    I cannot figure out how to total my column data correctly with JavaScript. The code I have will enter a new row, but it is not summing the columns. The new row is just filled with zeros.
    Code:
    function totalColumns() {
                var tds = document.getElementById('users_table').getElementsByTagName('td');
                var sum = 0;
                for(var i = 0; i < tds.length; i ++) {
                    if(tds[i].className == 'dataRow') {
                        sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
                    }
                }
                document.getElementById('users_table').innerHTML += '<tr><td>' + sum + '</td><td>' +sum+ '</td><td>' +sum + '</td></tr>';
                alert ("Columns have been totalled and listed at the bottom of each");
            }  //end totalColumns
    I can't figure out how to get the rows to total at all. Any insight would be appreciated! Thanks!

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Try:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    table {background:#ddd}
    td {font: 18px Tahoma, Geneva, sans-serif;padding:10px;text-align:right}
    td.sum {font-weight:bold}
    </style>
    <title>Fade it</title>
    <script type="text/javascript">
    /**
    *  Calculate totals in a table
    *  el = DOM element or id of dom element,
    *  cols = calculate column totals if not false
    *  rows = claculate row totals if not false
    */
    var tableTotal = function(el,cols,rows){
      typeof el == 'string' && (el = document.getElementById(el));
      var i, colTotal = [], rowTotal = [], colCo = 0, val, 
          rowCo = 0, totTotal = 0, tr, td = el.getElementsByTagName('td');
       // calculate
      for(i = 0; i < td.length;i++){
        tr != td[i].parentNode && (tr = td[i].parentNode) && (rowCo++) && (colCo = 0);
        val = td[i].innerHTML / 1 || 0;
        colTotal[rowCo-1] = (colTotal[rowCo-1] || 0) + val;
        rowTotal[colCo] = (rowTotal[colCo] || 0) + val;
        totTotal += val;
        colCo++;
      };
      // render col sums
      if(cols !== false){
        tr = el.getElementsByTagName('tr');
        rowCo = 0;
        while(colTotal.length){
          td = document.createElement('td');
          td.className = 'sum';
          td.innerHTML = colTotal.shift();
          tr[rowCo].appendChild(td);
          rowCo++;
        }
      };
      // render row sums
      if(rows !== false){
        tr = document.createElement('tr');
        el.appendChild(tr);
        cols !== false && rowTotal.push(totTotal);
        while(rowTotal.length){
          td = document.createElement('td');
          td.className = 'sum';
          td.innerHTML = rowTotal.shift();
          tr.appendChild(td)
        }
      };
    };
    
    onload = function(){
      tableTotal('users_table')
    };
    </script>
    </head>
    
    <body>
    <table id="users_table" style="border:1px solid #000;border-collapse: collapse;" border='1'>
      <tr class="dataRow">
        <td>11</td>
        <td>12</td>
        <td>13</td>
      </tr>
      <tr class="dataRow">
        <td>21</td>
        <td>22</td>
        <td>23</td>
      </tr>
      <tr id="row3" class="dataRow">
        <td>31</td>
        <td>32</td>
        <td>33</td>
      </tr>
      <tr class="dataRow">
        <td>41</td>
        <td>42</td>
        <td>43</td>
      </tr>
    </table>
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you again! Some slight tweaking and it works. You are most helpful.

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Glad it works!

    Have you noticed that there is a thank you button by my post if you want to improve my statistics?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •