jquery表单计算与合计

jquery表单计算与合计,jquery,Jquery,我试图使有3-4个输入的表单需要倍增,并得到每行的总数。我从Stackoverflow得到了这段代码,它在使用div时运行良好。但是当我把它改成table&tr时,它就不起作用了 <table> <h1>table - not working</h1> <tr class="1"> <td><input

我试图使有3-4个输入的表单需要倍增,并得到每行的总数。我从Stackoverflow得到了这段代码,它在使用div时运行良好。但是当我把它改成table&tr时,它就不起作用了

    <table>
 <h1>table - not working</h1>
                            <tr class="1">
                                <td><input name="pro_qty" type="number" />  </td>                                    
                                <td> <input name="pro_amt" type="number" value="100" /> </td>
                                <td> <span class="total_value"></span> </td>
                            </tr>
<br /><br /><br />
                            <tr class="2">
                                <td> <input name="pro_qty" type="number" />  </td>                                    
                                <td> <input name="pro_amt" type="number" value="200" /> </td>
                                <td> <span class="total_value"></span> </td>
                            </tr>



<td><span class="sub_total"></span> </td> 
</table>



<div>
 <h1>divs - works fine</h1>
                            <div class="1">
                                <td><input name="pro_qty" type="number" />  </td>                                    
                                <td> <input name="pro_amt" type="number" value="100" /> </td>
                                <td> <span class="total_value"></span> </td>
                            </div>
<br /><br /><br />
                            <div class="2">
                                <td> <input name="pro_qty" type="number" />  </td>                                    
                                <td> <input name="pro_amt" type="number" value="200" /> </td>
                                <td> <span class="total_value"></span> </td>
                            </div>



        <td><span class="sub_total"></span> </td> 
</div>




<script>

//any time the amount changes
$(document).ready(function() {
    $("input[name=pro_amt],input[name=pro_qty]").change(function(e) {
        var total = 0;
        var $row = $(this).parent();
        var pro_qty = $row.find("input[name=pro_qty]").val();
        var pro_amt = $row.find("input[name=pro_amt]").val();
        total = parseFloat(pro_qty * pro_amt);
        //update the row total
        $row.find(".total_value").text(total);
        console.log(total);

        var sub_total = 0;

        $(".total_value").each(function() {
            //Get the value
            var am= $(this).text();
            console.log(am);
            //if it"s a number add it to the total
            if (IsNumeric(am)) {
                sub_total += parseFloat(am, 10);
            }
        });
        $(".sub_total").text(sub_total);
    });
});


function IsNumeric(input) {
    return (input - 0) == input && input.length > 0;
}

</script>

请告知。谢谢

您的两个HTML版本都是错误的

第二,当转到表版本时,您需要再添加一个级别以获得实际行

快速修复您的代码:

阅读更多关于HTML的信息,不要在表外使用td


遗憾的是,您的浏览器更正了大部分代码。。。要真正了解如何编写代码,请使用并尝试。

这听起来是一个熟悉调试器使用的绝佳机会。使用浏览器中的调试工具,在代码执行时逐行遍历代码。检查变量的运行时值。这种行为与你所期望的有什么不同?大卫:谢谢你的及时回复。事实上,我正在学习,在撞了几个小时后,我把它贴在了这里。但我肯定会再试一次。再次感谢,很好用。非常感谢你的支持&当然我会按照你的建议把事情搞清楚的。再次感谢,不客气。另一个有用的要点是:尽量降低问题中的代码缩进,以便我们能够更有效地阅读:
var $row = $(this).parent().parent();