JSFiddle 代码无法在浏览器中用于行和列的总和计算

Question

JSFiddle 代码无法在浏览器中用于行和列的求和计算。请帮我处理代码

该代码在 jsfiddle 中有效，但在我的浏览器中无效。如果需要添加任何其他行才能正常工作，它

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

Answer 1

我认为这就是您要查找的脚本：将其放在 HTML 代码的末尾，就在 body 关闭之前。（感谢 this answer 进行总和计算）。您还可以对其进行细化，使其仅在列数据发生变化时才计算总和。

<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 代码无法在浏览器中用于行和列的总和计算

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

html

jsfiddle