0

次のようなhtmlテーブルがあります。行を動的に追加するオプションもあります。

                            <tbody>
                            <tr style="display: none" id="invoiceRow">
                                <td><textarea></textarea></td>
                                <td class="va_middle"><input type="text" name="quantity" class="mini" /></td>
                                <td class="va_middle"><input type="text" name="rate" class="mini" /></td>
                                <td class="va_middle"><input type="text" name="amount" class="mini" /></td>
                                <td>
                                    <a onclick="deleteInvoiceRow(this);" class="btn btn-small">
                                        <i class="icon-remove"></i>                     
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td><textarea></textarea></td>
                                <td class="va_middle"><input type="text" name="quantity" class="mini" /></td>
                                <td class="va_middle"><input type="text" name="rate" class="mini" /></td>
                                <td class="va_middle"><input type="text" name="amount" class="mini" /></td>
                                <td>
                                    <a onclick="deleteInvoiceRow(this);" class="btn btn-small">
                                        <i class="icon-remove"></i>                     
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2"><a onclick="addNewInvoiceRow();"><i class="icon-plus-sign right"></i></a></td>
                                <td class="va_middle" colspan="3">&nbsp; <strong>Total: &nbsp; &nbsp;</strong><input type="text" name="rate" class="total" /></td>
                            </tr>
                        </tbody>

各行の合計を取得し、最後の tr の合計フィールドに更新したいと思います。

jQueryでどのように行うのですか? 値の変更時に値を更新します。

4

1 に答える 1

0

私がそれを行う方法は、カップルのリスナーを TABLE タグに追加することです。また、「金額」という名前の入力は、「レート」と「数量」の積に等しいと想定しています。コードは次のようになります。

function calcTotalTable() {
    var total = 0;
    $('my_table input[name="amount"]').each(function(){
        // add some validation
        total += $j(this).val();
    });

    $('my_table input.total').val(total);
}

$('my_table').on('change', 'input[type="text"]', function() {
    var $row = $(this).closest('tr'),
        // you may need to add some validation before the calculation
        total = $row.find('input[name="quantity"]').val() * $row.find('input[name="rate"]').val();
    $row.find('input[name="amount"]').val(total);
    calcTotalTable();
}).on('click', 'a.btn btn-small', function() { // theses will handle the delete btn
        $(this).closest('tr').remove();
        calcTotalTable();
    });

もちろん、検証と書式設定を処理する必要がありますが、コードは基本的なプロセスを実行します。私はこのコードをテストしていませんが、一般的なアイデアを提供します。お役に立てば幸いです。

于 2012-12-09T06:41:06.097 に答える