JSFiddle code not working in browser for sum calculation of row and column

Question

JSFiddle code not working in browser for sum calculation of row and column..please help me with code

the code is working in jsfiddle but not in my browser..if any addition of aother lines is necessary for work it

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
        <meta name="dcterms.created" content="Fri, 10 Apr 2015 05:07:13 GMT">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title></title>
        <script src="https://code.jquery.com/jquery-2.0.2.js"></script>
        <script>
        $(document).ready(function(){
        $("table tr > td:nth-child(1) > input:not(#totalSum)").sum("keyup", "#totalSum");
    $("table tr > td:nth-child(2) > input:not(#totalSum1)").sum("keyup", "#totalSum1");
    $("table tr > td:nth-child(3) > input:not(#totalSum2)").sum("keyup", "#totalSum2")
    });
        </script>
        <!--[if IE]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
      </head>
      <body>
      <table>
        <tr>
            <td><input type="text" id="1"   /></td>
            <td><input type="text" id="2" /></td>
            <td><input type="text" id="3" /></td>
        </tr>  
        <tr>
            <td><input type="text" id="4"  /></td>
            <td><input type="text" id="5"  /></td>
            <td><input type="text" id="6" /></td>
        </tr>
        <tr>
            <td><input type="text" id="7" /></td>
            <td><input type="text" id="8" /></td>
            <td><input type="text" id="9" /></td>
        </tr>  
        <tr>
            <td><input type="text" name="totalSum" id="totalSum" value="" readonly="readonly" /></td>
             <td><input type="text" name="totalSum" id="totalSum1" value="" readonly="readonly" /></td>
             <td><input type="text" name="totalSum" id="totalSum2" value=""  readonly="readonly" /></td>
        </tr>    
    </table>


      </body>
    </html>

where is the actual problem when converting from jsfiddle to browser???? — Anoop, Apr 10 '15 at 10:45
Could you please post the jsfiddle link showing the correct behaviour? — Giorgio, Apr 10 '15 at 11:43

score 1 · Accepted Answer · edited May 23 '17 at 12:22

I think this is the script you're looking for: place it at the end of HTML code, just before body closure. (Thanks to this answer for the sum calculation). You can also refine it to calculate the sum only when data on column changes.

<script src="https://code.jquery.com/jquery-2.0.2.js"></script>

<script>
$("input:not(#totalSum)").keyup(function() {
    var sum = 0;
    $("table tr > td:nth-child(1) > input:not(#totalSum)").each(function() { sum += parseFloat($(this).val()) || 0; }); $('#totalSum').val(sum); sum=0;
    $("table tr > td:nth-child(2) > input:not(#totalSum1)").each(function() { sum += parseFloat($(this).val()) || 0; }); $('#totalSum1').val(sum); sum=0;
    $("table tr > td:nth-child(3) > input:not(#totalSum2)").each(function() { sum += parseFloat($(this).val()) || 0; }); $('#totalSum2').val(sum);
});
</script>

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

JSFiddle code not working in browser for sum calculation of row and column

1 Answers1