SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sum of all the values in a column

    I have a table and I want to calculate the sum of all the values of a column. The <td> elements in this column all have the same class name. I'm having problems making the script work.

    Here is the code:

    Code:
    $(document).ready(function()
    	$sum = 0;
    	$('.className').each(function(index) { 
      		$sum = sum + (this).text();
    		$('<p>' + $sum + '</p>').insertAfter('h2:contains(Sum)');
    	})
    });

  2. #2
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've modified the code in order to run it everytime the page loads:

    Code:
    		<script type="text/javascript">
                window.onload=function(){
                    var cellObjs = getElementsByClassName(document, 'td', "coppie");
                    var sum = 0;
                    for(i=0; i < cellObjs.length; i++){
                        sum += new Number(cellObjs[i].innerHTML);
                    }
                    document.getElementById('totalCont').innerHTML = 'Total: '+sum;
                }
                //---------------------------------------
                function getElementsByClassName(oElm, strTagName, strClassName){
                    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
                    var arrReturnElements = new Array();
                    strClassName = strClassName.replace(/\-/g, "\\-");
                    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
                    var oElement;
                    for(var i=0; i<arrElements.length; i++){
                        oElement = arrElements[i];
                        if(oRegExp.test(oElement.className)){
                            arrReturnElements.push(oElement);
                        }
                    }
                    return (arrReturnElements)
                }
            </script>
    What if I want the totals to be calculated automatically, everytime the table is edited (for example when I filter out some table rows)?

  3. #3
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webgypsy View Post
    You can calculate the totals automatically but you need to specify all the ways you could filter out any table rows. eg: using DOM methods to remove rows, clicking a checkbox or radio button in another cell on a given row to filter out the row without actually deleting it, clicking something in elements outside of the table that ends up editing the table etc etc.
    I'm only filtering rows in one way right now: I have an input field and I filter the rows by the user input (I hide the rows that don't contain the words that the user entered). How can I write in the code above "don't calculate the values of the hidden rows"?

  4. #4
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webgypsy View Post
    In the for loop that sums the cell values, first check if the cell's parent node has been filtered out (by changing its style or however you filtered out). If it has been, don't include that cell's innerHTML in the summing.
    I've filtered it out using jQuery's hide() method. Can I use something like

    Code:
    if (element:hidden)
    ?

  5. #5
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webgypsy View Post
    What you're trying to do is fairly straight forward and doesn't need jquery. The code I posted is just plain javascript. I would just check the .style.display property of each row to see if it has been "hidden" and if it has then exclude the row from the summing of totals. But without seeing your actual code I'm not sure exactly what you have done.
    Yeah, what I meant was how to write jQuery's :hidden with Javascript ^^

  6. #6
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it's better if I post some code here, because I can't seem to be able to make it work.

    This is the input field:

    Code:
    		<div id="filtro">
    			<label for="ricerca">Filtra per</label>
    			<input type="text" name="ricerca" />
    		</div>
    This is the connected Javascript:

    Code:
    $(document).ready(function() {
            $('input[name=ricerca]').keyup(function(){
                    $val=$(this).val();
    		$('table[id=incontri] tbody tr:not(:contains("' + $val + '"))').hide();
    		$('table[id=incontri] tbody tr:contains("' + $val + '")').show();
    	})
    });
    And this is how I've tried to modify your script to skip the hidden rows:

    Code:
    <script type="text/javascript">
                window.onload=function(){
                    var cellObjs = getElementsByClassName(document, 'td', "coppie");
                    var sum = 0;
                    for(i=0; i < cellObjs.length; i++){
                    	if (cellObjs[i].parent.style.display="none") {
                    		i = i+1;
                    	} else {
                        sum += new Number(cellObjs[i].innerHTML);
                      }
                    }
                    document.getElementById('incontritotali').innerHTML = sum;
                }
                //---------------------------------------
                function getElementsByClassName(oElm, strTagName, strClassName){
                    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
                    var arrReturnElements = new Array();
                    strClassName = strClassName.replace(/\-/g, "\\-");
                    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
                    var oElement;
                    for(var i=0; i<arrElements.length; i++){
                        oElement = arrElements[i];
                        if(oRegExp.test(oElement.className)){
                            arrReturnElements.push(oElement);
                        }
                    }
                    return (arrReturnElements)
                }
            </script>

  7. #7
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this line the problem?

    Code:
    if (cellObjs[i].parent.style.display="none")


Bookmarks

Posting Permissions

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