HTML 表中的值小计答案

【问题标题】：Subtotal of Values in HTML TableHTML 表中的值小计
【发布时间】：2012-03-24 02:17:21
【问题描述】：

我有一张这样布置的桌子：

<table border="0">
    <tr>
        <td>10: <input type="text" size="1" autocomplete="off" name="10"/>&nbsp;&nbsp;</td>
        <td>12: <input type="text" size="1" autocomplete="off" name="12"/>&nbsp;&nbsp;</td>
        <td>14: <input type="text" size="1" autocomplete="off" name="14"/>&nbsp;&nbsp;</td>
        <td>16: <input type="text" size="1" autocomplete="off" name="16"/>&nbsp;&nbsp;</td>
        <td>18: <input type="text" size="1" autocomplete="off" name="18"/>&nbsp;&nbsp;</td>
        <td>20: <input type="text" size="1" autocomplete="off" name="20"/>&nbsp;&nbsp;</td>
        <td>22: <input type="text" size="1" autocomplete="off" name="22"/>&nbsp;&nbsp;</td>
    </tr>
</table>

我需要将输入框中输入的值乘以 65，并实时生成以美元计的小计。我环顾四周，我对 javascript 或 jquery 不太精通，所以我想知道这样的解决方案是否已经存在，或者是否有人可以指出我创建一个正确的方向。

【问题讨论】：

字段名称不能是数字，对于初学者来说。
How to calculate active total using javascript for html form的可能重复
@Diodeus 我没有在其他任何地方引用它们，所以这没什么大不了的。

标签： javascript jquery html html-table

【解决方案1】：

使用.on 和.val() 可以获得 input 的所有值。然后你可以做任何你想做的操作

http://api.jquery.com/on/

http://api.jquery.com/val/

【讨论】：

【解决方案2】：

您需要在每个输入上处理 change() 事件：

$('input').change(function () {
    var that = $(this);

    that.siblings('div').text(parseInt(that.val(), 10) * 65);  
});

http://jsfiddle.net/XZNfS/

【讨论】：

【解决方案3】：

将此添加到 HTML 的底部：Subtotal: <span id="subtotal"></span>

确保 jQuery 已加载，然后将此 JavaScript 扔到 HTML 下方：

<script type="text/javascript">
function compute_subtotal() {
    var total = 0;
    $("input[type=text]").each( function(i,e) {
        var value = $(e).val();
        if( parseInt(value) > 0 ) total += (65 * parseInt(value));
    });
    $("#subtotal").html( total );
}

jQuery(document).ready( function() {

    $("input[type=text]").change( function() { compute_subtotal(); } );
    $("input[type=text]").keyup( function() { compute_subtotal(); } );

});
</script>

【讨论】：