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

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

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

在jquery中，div，span的数据将是html，append，text等。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

应该是这样的

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

Answer 3

我认为您可以使用此自定义代码段。请检查小提琴。

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个输入字段

3 个答案:

HTML

的jQuery