Question

我有一张表，我在其中动态生成行。我有一个字段，当我在其他字段中输入值时，我需要自动计算的值。 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，但没有用。

请提出解决方案。提前谢谢。

Answer 1

首先，您需要将html（id，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..
});

这样我们就可以将事件处理委托给表，以便它也可以使用动态添加的元素。

Answer 2

根据我之前的评论完成以下答案：

您需要使用class=""或现有的name=""代替ids作为输入元素。我现在已经使用了现有的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);
    });
});

基本上它等待日期或费率的任何变化，并找到相对于父行的匹配字段。代码可以简化，但这次我最可读。

无法为动态创建的行中的特定字段生成自动求和

2 个答案:

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