Sum of all the values in a column

[anon80411031]

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:

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

[anon80411031]

I’ve modified the code in order to run it everytime the page loads:

		<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)?

[anon80411031]

@webgypsy

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”?

[anon80411031]

@webgypsy

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

if (element:hidden)

?

[anon80411031]

@webgypsy

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 ^^

[anon80411031]

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:

		<div id="filtro">
			<label for="ricerca">Filtra per</label>
			<input type="text" name="ricerca" />
		</div>

This is the connected Javascript:

$(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:

<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>

[anon80411031]

Is this line the problem?

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