function for Calculating sum of values in row and coloms of html table by javascript

tarunkhatri

HI can anyone help me with a function of javascript ... that calculates the sum of all colums at the very last row and also sum of all rows at the very last coloum....

It wiuld be like a 2-d array sum.. But i am new to javascript so totally lost....
I want the total to be updated as soon as any value changes in any cell.....

Please please help me

gits

please show what you have done so far ...

kind regards

Frinavale

Hi Tarunkhatri,

Is this question the same as your other question titled:
"I want to sum values in rows and coloums of a table."?

tarunkhatri

Yes Frinavale,

Its the same, but there i tried to show my code which i develpoed thn I came to know tht it is not relevaly enough.
I wanted a simple function which is adding value of all prior rows and coloms (not by using property getelementby Tagname as its not supported by IE). And also wanted to know how can I call tht in my actual table other than defining the table ID.

RamananKalirajan

Hi I have tried one, But i dont know wether it fits into your requriement.

JS: Code

Expand|Select|Wrap|Line Numbers

 <script type="text/javascript">

    function getColumnCount()

    {

        return document.getElementById('myTable').getElementsByTagName('tr')[0].getElementsByTagName('td').length;         

    }
 
    function getRowCount()

    {

        return document.getElementById('myTable').rows.length;

    }
 
    function doAdd(ths)

    {

        //alert(ths.parentNode.cellIndex);

        //alert(getColumnCount());

        var lastCol = getColumnCount()-1;

        var lastRow = getRowCount()-1;

        //for Column Sum

         var table = document.getElementById("myTable");

       var row = table.rows[ths.parentNode.parentNode.rowIndex];

       var colSum=0;

       for(var i=0;i<lastCol;i++)

            colSum=eval(colSum) + eval(row.cells[i].childNodes[0].value);

        row.cells[lastCol].innerHTML = colSum;
 
        //for Row Sum

        var cIndex = ths.parentNode.cellIndex;

        //alert(cIndex);

        var rowSum = 0;

        for(var i=0;i<lastRow;i++)

            rowSum = eval(rowSum) + parseInt(table.rows[i].cells[cIndex].childNodes[0].value);

        table.rows[lastRow].cells[cIndex].innerHTML = rowSum;
 
        //for the final Value in the last row last column

        var finSum = 0;

        for(var i=0;i<lastRow;i++)

            finSum = eval(finSum) + parseInt(table.rows[i].cells[lastCol].innerHTML);

        for(var i=0;i<lastCol;i++)

            finSum=eval(finSum) + eval(table.rows[lastRow].cells[i].innerHTML);

        table.rows[lastRow].cells[lastCol].innerHTML = finSum;

    }

</script>

HTML Code:

Expand|Select|Wrap|Line Numbers

 <table cellspacing="0" cellpadding="0" width="100%" border="1" id="myTable">

    <tr>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td>0</td>

    </tr>

    <tr>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td>0</td>

    </tr>

    <tr>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td>0</td>

    </tr>

    <tr>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td><input type="text" value="0" onchange="doAdd(this)"></td>

        <td>0</td>

    </tr>

    <tr>

        <td>0</td>

        <td>0</td>

        <td>0</td>

        <td>0</td>

        <td>0</td>

        <td>0</td>

    </tr>

</table>

Thanks and Regards
Ramanan Kalirajan

Dormilich

Quote:

Originally Posted by RamananKalirajan

Expand|Select|Wrap|Line Numbers

         //for the final Value in the last row last column

        var finSum = 0;

        for(var i=0;i<lastRow;i++)

            finSum = eval(finSum) + parseInt(table.rows[i].cells[lastCol].innerHTML);

        for(var i=0;i<lastCol;i++)

            finSum=eval(finSum) + eval(table.rows[lastRow].cells[i].innerHTML);

        table.rows[lastRow].cells[lastCol].innerHTML = finSum;

    }

isn’t that overly complicated? all you need is to loop over every <input> element…

Expand|Select|Wrap|Line Numbers

 // using some slightly modified HTML

function sumTotal()

{

        // "all" = ID of the display cell

    var total = new Summe("all");
 
        // Object.applyForEach() similar to Array.forEach()

    document.getElementsByTagName("input").applyForEach(function() { total.add(this.value); });
 
    total.show();

}
 
// going MVC

function Summe(output_id)

{

    this.out = output_id;

    this.sum = 0;

}
 
Summe.prototype.add = function(x)

{

    var y = parseFloat(x);

    if (!isNaN(y))

        this.sum += y;

}
 
Summe.prototype.show = function()

{

    var td = document.getElementById(this.out)

    if (td)

        td.innerHTML = this.sum;

}

Frinavale

Quote:

Originally Posted by tarunkhatri

Yes Frinavale,

Its the same, but there i tried to show my code which i develpoed thn I came to know tht it is not relevaly enough.
I wanted a simple function which is adding value of all prior rows and coloms (not by using property getelementby Tagname as its not supported by IE). And also wanted to know how can I call tht in my actual table other than defining the table ID.

What version of IE are you using?

I use the getElementsByTagName() method all the time. It works fine in IE7 and IE8. I haven't tested it in IE6...but then again IE6 is 2 versions ago and is old enough for me to justify not supporting any more.

This doesn't have to be complicated. All you have to do is grab all of the rows in the table. Retrieve the number of columns in the table and create an array that will hold all of the sums of the columns (where each element in the array corresponds to a column). Loop through the rows and for each row loop through it's cells (columns) adding their values to the value in the array....

the following is a rough outline of what I was talking about...I haven't tested it and can see some obvious ways to make it crash but here you go:

Expand|Select|Wrap|Line Numbers

 
var theTable = document.getElementById("numbersTable");

 var rows = theTable.getElementsByTagName("tr");

 if(rows.length > 0)

 {

   var numColumns = rows[0].getElementsByTagName("td").length;

   var columnSums = new Array(numColumns);

   var cols = 0;

   for(cols = 0; cols < columnSums.length; cols++)

   {

     columnSums[cols] = Number(0);

   }

   var rowIndex = 0;

   for(rowIndex = 0; rowIndex < rows.length; rowIndex++)

   {

     var cells = rows[rowIndex].getElementsByTagName("td");

     var cellIndex = 0;

     for(cellIndex = 0; cellIndex < cells.length; cellIndex++)

     {

       var cellValue = Number(cells[cellIndex].innerHTML);

       columnSums[cellIndex] = Number(columnSums[cellIndex]) + cellValue;

     }

   }

   var i;

   for(i=0; i<columnSums.length; i++)

   {

     alert("column: " + i +" sum: " +columnSums[i]);

   }

 }else{ 

    alert("no rows");

 }

tarunkhatri

HI Ramanan , Dormi & Frina,

The code provided by Ramanan did my job.. you all are such gr8 guys .. thanks very very much... Ramanan you made my lide easier.. God bless u all

tarunkhatri

Ramanan,

Can u pls explain what is the significance of writing parentNode 2 times ths.parentNode.parentNode.rowIndex

RamananKalirajan

In the Code ths.parentNode.parentNode.rowIndex, the "ths" is your input button object what you clicked. It has a parent Table Cell -> first parentNode and Table Cell has the parent Table Row so the second parentNode which will give you the table row object, from that you can fetch the row Index

Thanks and Regards
Ramanan Kalirajan

tarunkhatri

Ohh yeah... I understand your complete code now.. It was really very very good. Thank you. .But as all my values are comin from a database table .

With onhange event I also wanted OnLoad event. I did it this way
"<input type="text" value="0" size = "2" onchange="doAdd(this)" onload="doAdd(this)">"

But Onload dosnt work here.

Thanks for al your help.

Kind Regards
Tarun

Dormilich

Quote:

Originally Posted by tarunkhatri

But Onload dosnt work here.

It works, but not the way you expect it. onload basically says that the code is to be executed when the element finished loding. this does not mean that the full table is ready yet, so the script might miss some important details.

PS. to me this onload event seems futile

tarunkhatri

I understand your point but I am using this even in every <td> with my onchange event. Not at the table level. So every time a td loads with some value frm databse it should add it to the total . Dont knw wht the problem is.

I

Dormilich

first, you’re not using the event on <td>, but <input>

second, why should you calculate the total while the table (and with it the form elements) is still built, ain’t it enough to do that, once the page has finished?

third, that would spare you (rows * columns – 1)* function calls.

* - if you, for example, have a 11 x 14 table and an approximate function run time of 100 ms, you’d save 15 s of time !!!

tarunkhatri

Ohh.. U are absolutly right Dormi. what a stupid thing I was about to do.

I think I need some different event which works when the complete table is loaded.

RamananKalirajan

To Dormilich,
Yes The way what you have specified for the final td row sum and column sum is an efficient one, when compared to mine. I will update myself Dormilich. Thanks for the suggestion.

Thanks and Regards
Ramanan Kalirajan

Dormilich

Quote:

Originally Posted by RamananKalirajan

Thanks for the suggestion.

you can use a similar code for the row sum, you only need to use the <tr> as starting point.

unfortunately, there is nothing similar available for columns, except maybe using class names (where you’d have the same code for rows and columns).

Dormilich

Quote:

Originally Posted by tarunkhatri

I think I need some different event which works when the complete table is loaded.

Expand|Select|Wrap|Line Numbers

addEvent(window, "load", func);

function for Calculating sum of values in row and coloms of html table by javascript

re: function for Calculating sum of values in row and coloms of html table by javascript

re: function for Calculating sum of values in row and coloms of html table by javascript

re: function for Calculating sum of values in row and coloms of html table by javascript

re: function for Calculating sum of values in row and coloms of html table by javascript

re: function for Calculating sum of values in row and coloms of html table by javascript

re: function for Calculating sum of values in row and coloms of html table by javascript

re: function for Calculating sum of values in row and coloms of html table by javascript

re: function for Calculating sum of values in row and coloms of html table by javascript

re: function for Calculating sum of values in row and coloms of html table by javascript

re: function for Calculating sum of values in row and coloms of html table by javascript

re: function for Calculating sum of values in row and coloms of html table by javascript

re: function for Calculating sum of values in row and coloms of html table by javascript

re: function for Calculating sum of values in row and coloms of html table by javascript

re: function for Calculating sum of values in row and coloms of html table by javascript

re: function for Calculating sum of values in row and coloms of html table by javascript

re: function for Calculating sum of values in row and coloms of html table by javascript

re: function for Calculating sum of values in row and coloms of html table by javascript

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about