Question

我有一张像这样的桌子：

<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，所以我想知道这样的解决方案是否已经存在，或者是否有人可以指出我正确的方向创建一个。

Answer 1

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

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

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

Answer 2

您需要在每个输入上处理change（）事件：

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

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

http://jsfiddle.net/XZNfS/

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

HTML表格中的值小计

3 个答案: