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

根据我之前的评论，下面的完整答案：

您需要使用class=""或您现有的name=""而不是输入元素的 id。我现在已经和你现有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

首先，您需要将idhtml ( rate, days, cost) 中的 s 更改为 classes，因为重复的 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 回答