计算 jQuery 中 2 个输入字段的总数

Question

我有这个 HTML 表格：

<div>
    Amount 1: <input id="amount1" type="text" />
    <br>
    Amount 2: <input id="amount2" type="text" value="0.00">
    <br>
    <span id="result"></span>
</div>

还有这个 Jquery 代码：

$("#amount1").keyup(calc);
$("#amount2").keyup(calc);
function calc() {
  $('#result').val(
    parseInt($('#amount1').val(), 10) + parseInt($("#amount2").val(), 10)
  );
}

我想做的只是在有人将数字输入表格时计算并显示 amount1+amount2。请注意，amount1 默认为 0.00。

当我运行它时，它没有计算任何东西。我在这里做错了什么？

Answer 1

应该是这样的

$("#amount1").keyup(calc);
    $("#amount2").keyup(calc);
    function calc() {
      $('#result').html(
        parseInt($('#amount1').val(), 10) + parseInt($("#amount2").val(), 10)
      );
    }

Answer 2

跨度内的信息，div 将作为 html 而不是值

在 javascript 中，div、span 的数据将是 innerHTML

在 jquery 中，div 的数据，跨度将是 html，追加，文本等

在处理浮点数时使用 parseFloat 而不是 parseInt

$("#amount1").keyup(calc);
$("#amount2").keyup(calc);

function calc() {

    $('#result').html(
        parseFloat($('#amount1').val(), 10) + parseFloat($("#amount2").val(), 10)
    );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    Amount 1: <input id="amount1" type="text" />
    <br>
    Amount 2: <input id="amount2" type="text" value="0.00">
    <br>
    <span id="result"></span>
</div>

Answer 3

我认为您可以使用此自定义代码段。请检查 fiddle.

HTML

<table>
<thead>
    <th>Item</th>
    <th>Cost</th>
</thead>
<tbody id="tbody">
    <tr>
        <td>Item 1</td>
        <td>
            <input type="text" class="elm" />
        </td>
    </tr>
    <tr>
        <td>Item 2</td>
        <td>
            <input type="text" class="elm" />
        </td>
    </tr>
    <tr>
        <td>Item 3</td>
        <td>
            <input type="text" class="elm" />
        </td>
    </tr>
    <tr>
        <td>Item 4</td>
        <td>
            <input type="text" class="elm" />
        </td>
    </tr>
    <tr>
        <td>Item 5</td>
        <td>
            <input type="text" class="elm" />
        </td>
    </tr>

</tbody>
<tfoot>
    <tr>
        <td>Total</td>
        <td>
            <label id="total">0</label>
        </td>
    </tr>
</tfoot>

jQuery

 $('body').on('keyup','.elm',function(e){
    //Check Key Press is Enter
    if (e.keyCode != 13) {
        var sum = 0;
        $('.elm').each(function() {
            if($(this).val() != '' && !isNaN($(this).val())){
                sum += parseInt($(this).val());
            }
        });

        $('#total').text(sum);
    }
    else{
        var itemNum = $('#tbody tr').length + 1;
        var newRow = '<tr>'+
            '<td>Item'+itemNum+'</td>'+
            '<td>'+
                '<input type="text" class="elm">'+
            '</td>'+
        '</tr>';
        $('#tbody').append(newRow);
    }
});

http://jsfiddle.net/hoja/y7ny6r5n/5/

计算 jQuery 中 2 个输入字段的总数

calculating total of 2 input fields in jQuery

jquery

HTML

jQuery