1

行を動的に生成しているテーブルがあります。他のフィールドに値を入力すると、値が自動的に計算される必要があるフィールドがありました。HTML のテーブル構造は次のとおりです。

<table cellspacing="2" cellpadding="3" border="0" width="100%" style="padding-top: 5px;" class="form_style_table" id="add_iaDetails_table">
                        <tr>                        
                            <td colspan="5" align="right" class="border_bottom_1">
                                <span class="float_left" id="status_msg"></span>
                                <input type="button" value="Add Detail" id="add_iaDetails_button" class="orange"/> 
                                <input type="button" value="Remove Checked" id="delete_iaDetails" class="orange"/>
                                <input type="button" value="Request Underpin" class="orange"/>
                            </td>
                        </tr>
                        <th align="middle" valign="middle">Impact for</th>
                        <th align="middle" valign="middle">Rate</th>
                        <th align="middle" valign="middle">Days</th>
                        <th align="middle" valign="middle">Cost</th>
                            <tr>
                                <td width="30%"><select name="add_resource"></select></td>                  
                                <td><input type="text" id="rate" name="rate"/></td>
                                <td><input type="text" id="days" name="days"/></td>
                                <td><input type="text" id="cost" name="cost"/></td>
                                <td width="2%" align="left"><input type="checkbox" name="1"/></td>
                            </tr>
                    </table>

次のコードを使用して行を生成しています。

$("#add_iaDetails_button").click(function () {
    $('#add_iaDetails_table').append('<tr><td width="30%"><select name="add_resource"></select></td><td><input type="text" id="rate" name="rate"/></td><td><input type="text" id="days" name="days"/></td><td><input type="text" id="cost" name="cost"/></td><td width="2%" align="left"><input type="checkbox" name="1"/></td></tr>'); });

ここでは、レートと日数の値を入力するときにコストを計算したいと考えています。

.blur と .live を使用してみましたが、うまくいきませんでした。

解決策を提案してください。前もって感謝します。

4

2 に答える 2

0

私の以前のコメントに基づいて、以下の完全な回答：

入力要素の ID の代わりに、class=""または既存のものを使用する必要があります。name=""私は今のところあなたの既存のものと一緒に行きましたname=""。

HTMLを文字列定数に入れることはメンテナンスの悪夢などであるため、テンプレートにスクリプトブロックも使用しました。

$("#add_iaDetails_button").click(function () {
    $('#add_iaDetails_table').append($('#template').html());
});

JSFiddle: http://jsfiddle.net/QLQJf/

$(function () {
    $(document).on('change', '[name=rate], [name=days]', function () {
        var $row = $(this).closest('tr');
        var $rate = $row.find('input[name=rate]');
        var $days = $row.find('input[name=days]');
        var $cost = $row.find('input[name=cost]');
        var rate = parseFloat($rate.val());
        var days = parseFloat($days.val());
        $cost.val(rate * days);
    });
});

基本的に、日または率のいずれかの変更を待ち、親行に関連する一致するフィールドを見つけます。コードは単純化できますが、今回は最も読みやすいものを選びました。

于 2013-10-01T10:14:06.160 に答える
0

id最初に、 html 内の s ( rate、days、cost) をクラスに変更する必要があります。これは、ID の重複は無効であるためです。

<tr>
    <td width="30%"><select name="add_resource"></select></td>                  
    <td><input type="text" class="rate" name="rate"/></td>
    <td><input type="text" class="days" name="days"/></td>
    <td><input type="text" class="cost" name="cost"/></td>
    <td width="2%" align="left"><input type="checkbox" name="1"/></td>
</tr>

と

$('#add_iaDetails_table').append('<tr><td width="30%"><select name="add_resource"></select></td><td><input type="text" class="rate" name="rate"/></td><td><input type="text" class="days" name="days"/></td><td><input type="text" class="cost" name="cost"/></td><td width="2%" align="left"><input type="checkbox" name="1"/></td></tr>'); });

次に、イベントを処理するためにこれを試してください

$('#add_iaDetails_table').on('change', '.rate, .days', function(){
  // do the calculations in here..
});

このようにして、動的に追加された要素でも機能するように、イベント処理をテーブルに委任します..

于 2013-10-01T09:53:03.003 に答える