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
– Anoop, Commented Apr 10, 2015 at 10:45
Could you please post the jsfiddle link showing the correct behaviour? — Giorgio
– Giorgio, Commented Apr 10, 2015 at 11:43

Community · Accepted Answer · 2017-05-23 12:22:11Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related