如何使用onchange在jquery中创建autosum

时间:2013-10-04 05:37:14

标签: javascript jquery

我的代码有问题。我创建了一个简单的jquery文件,它自动在我的表中的每一行。我的问题是我无法得到正确的行数。这就是我所做的。

在我的jquery中

$('[id^=total]').on('change',function() {

        var index = this.id.match(/\d+/)[0];
        var total_input = parseInt($('#total'+index).val());

        var total = 0;

        $('[id^=total]').each(function(index){
            total += parseFloat($(this).val()?$(this).val():0);
        });

        var totalAll = $('#total_amt_due').val(total.toFixed(2));           
});

在我的HTML中

<table border="1">
        <tr>
            <td>
                <input type='text' name='total[]' id='total1' value='' />
            </td>
        </tr>
        <tr>
            <td>
                <input type='text' name='total[]' id='total2' value='' />
            </td>
        </tr>
        <tr>
            <td>
                <input type='text' name='total[]' id='total3' value='' />
            </td>
        </tr>
        <tr>
            <td>
                <input type='text' name='total[]' id='total4' value='' />
            </td>
        </tr>
        <tr>
            <td>
                <input type='text' name='total[]' id='total5' value='' />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" class="k-textbox" value="0.00" style="color: red; text-align: right;
                    font-family: courier" name="total_amt_due" id="total_amt_due" readonly="readonly" />
            </td>
        </tr>
</table>

我动态地在PHP中创建了这个表。但为了简单起见,我删除了循环。我对jquery并不擅长。那么你能为我提供一个创建autosum的简单答案吗?

这是小提琴:http://jsfiddle.net/rochellecanale/K8UNQ/3/

2 个答案:

答案 0 :(得分:3)

显示总计总和的行有问题,因为它的id也以“total”开头。 只需更改其ID(假设为amt_due而不是total_amt_due):

<td>
         <input type="text" class="k-textbox" value="0.00" style="color: red; text-align: right; font-family: courier" name="total_amt_due" id="amt_due" readonly="readonly" />
     </td>

检查出来:FIDDLE

答案 1 :(得分:0)

var total = 0;
$('[id^=total]').on('change', function () {
    if ($.trim($(this).val()) != '') {
        total += parseFloat($(this).val() ? $(this).val() : 0);
    }
    var totalAll = $('#total_amt_due').val(total.toFixed(2));
});

<强> WORKING DEMO