我需要动态地找到用户输入值的总和,因为用户输入值并自动显示值的总和

时间:2014-12-30 08:56:44

标签: javascript jquery

var sum = 0;
$('.numbers').each(function() {
sum += parseInt($.text(this), 10);
});

$('.total').text(sum);

我尝试了上面的代码,但它不适用于动态值作为用户输入值动态。我需要我的代码动态计算用户输入的值,并在用户输入值时显示值的总和,而不管inputs.i的数量。我是jquery的新手请帮我编码

3 个答案:

答案 0 :(得分:1)

你的语法有点偏,它应该是:

var sum = 0;
$('.numbers').each(function() {
  sum += parseInt($(this).val());
});

$('.total').text(sum);

答案 1 :(得分:1)

你可以使用像这样的东西

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);
    }
});

你也可以使用jquery的clone函数从表中克隆tr。那就是你。

小提琴

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

答案 2 :(得分:0)

对于表单元素(<input><textarea>),您应该使用.val()方法来获取输入内容。

完整代码:

var sum = 0;
$('.numbers').each(function() {
  sum += parseInt($(this).val(), 10);
});

$('.total').text(sum);