Javascript jquery在动态添加的行上计算

我已经动态添加了行，我想自动计算行上的值。 以下是我的部分代码：

<table id="itemsTable" class="general-table">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th>Код на продукт</th>
                                    <th>Описание</th>
                                    <th>Брой</th>
                                    <th>Цена</th>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr class="item-row">
                                        <td></td>
                                        <td><input name="itemCode[]" value="" class="tInput" id="itemCode" tabindex="1" /> </td>
                                        <td><input name="itemDesc[]" value="" class="tInput" id="itemDesc"  readonly="readonly" /></td>
                                        <td><input name="itemQty[]" value="" class="tInput" id="itemQty" tabindex="2"/></td>
                                        <td><input name="itemPrice[]" value="" class="tInput" id="itemPrice" readonly="readonly" /> </td>

                                    </tr>
                                </tbody>
                            </table>
                           <a href="#" id="addRow" class="button-clean large"><span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Добави ред</span></a> 
                           <div style="float: right; width: 100px;">
                           <div id="container">Общо: <span style="clear:both;" id="added"></span><br></div>
                    </div>

---

问题是该脚本只计算第一行。

您的网页中有重复的ID。无论何时，只要您使用重复的ID，它都会被处理为第一个元素。因此，您必须为此制作动态ID：

使用PHP制作HTML:

<table id="itemsTable" class="general-table">
    <thead>
        <tr>
            <th></th>
            <th>Код на продукт</th>
            <th>Описание</th>
            <th>Брой</th>
            <th>Цена</th>
        </tr>
    </thead>
    <tbody>
    <?php
        foreach( $yourArray as $key=>$item){}
    ?>
        <tr class="item-row">
            <td></td>
            <td><input name="itemCode[]" value="" class="tInput" id="itemCode_<?php echo $key;?>" tabindex="1" /> </td>
            <td><input name="itemDesc[]" value="" class="tInput" id="itemDesc_<?php echo $key;?>"  readonly="readonly" /></td>
            <td><input name="itemQty[]" value="" class="tInput" id="itemQty_<?php echo $key;?>" tabindex="2"/></td>
            <td><input name="itemPrice[]" value="" class="tInput" id="itemPrice_<?php echo $key;?>" readonly="readonly" /> </td>
        </tr>
    <?php
        }
    ?>
    </tbody>
    </table>
       <a href="#" id="addRow" class="button-clean large"><span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Добави ред</span></a> 
       <div style="float: right; width: 100px;">
       <div id="container">Общо: <span style="clear:both;" id="added"></span><br></div>
</div>

$(document).ready(function(){

  $('input').keyup(function(){ // run anytime the value changes
    // getting parent TR of current Input
    var parent_tr = $(this).closest('tr');

    //gettting parent TR's child input named as 'itemQty[]'
    var firstValue = parseFloat($("input[name='itemQty[]']", parent_tr).val()); // get value of field

    //gettting parent TR's child input named as 'itemPrice[]'
    var secondValue = parseFloat($("input[name='itemPrice[]']", parent_tr).val()); //

    $('#added').html(firstValue * secondValue); // add them and output it
    });

});

---

演示将静态HTML显示两行：

您的网页中有重复的ID。无论何时，只要您使用重复的ID，它都会被处理为第一个元素。因此，您必须为此制作动态ID：

使用PHP制作HTML:

<table id="itemsTable" class="general-table">
    <thead>
        <tr>
            <th></th>
            <th>Код на продукт</th>
            <th>Описание</th>
            <th>Брой</th>
            <th>Цена</th>
        </tr>
    </thead>
    <tbody>
    <?php
        foreach( $yourArray as $key=>$item){}
    ?>
        <tr class="item-row">
            <td></td>
            <td><input name="itemCode[]" value="" class="tInput" id="itemCode_<?php echo $key;?>" tabindex="1" /> </td>
            <td><input name="itemDesc[]" value="" class="tInput" id="itemDesc_<?php echo $key;?>"  readonly="readonly" /></td>
            <td><input name="itemQty[]" value="" class="tInput" id="itemQty_<?php echo $key;?>" tabindex="2"/></td>
            <td><input name="itemPrice[]" value="" class="tInput" id="itemPrice_<?php echo $key;?>" readonly="readonly" /> </td>
        </tr>
    <?php
        }
    ?>
    </tbody>
    </table>
       <a href="#" id="addRow" class="button-clean large"><span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Добави ред</span></a> 
       <div style="float: right; width: 100px;">
       <div id="container">Общо: <span style="clear:both;" id="added"></span><br></div>
</div>

$(document).ready(function(){

  $('input').keyup(function(){ // run anytime the value changes
    // getting parent TR of current Input
    var parent_tr = $(this).closest('tr');

    //gettting parent TR's child input named as 'itemQty[]'
    var firstValue = parseFloat($("input[name='itemQty[]']", parent_tr).val()); // get value of field

    //gettting parent TR's child input named as 'itemPrice[]'
    var secondValue = parseFloat($("input[name='itemPrice[]']", parent_tr).val()); //

    $('#added').html(firstValue * secondValue); // add them and output it
    });

});

---

演示将静态HTML显示两行：

是否共享您的

是的，我已经编辑了我的帖子。感谢您的回答。对于动态表单，ID必须是唯一的，我建议您处理

类

属性。。。也要共享

添加更多
代码！请分享您的
是的，我已经编辑了我的帖子。谢谢您的回答。对于动态表单，ID必须是唯一的，我建议您处理
类
属性。。。也要共享
添加更多
代码@安东彼得罗夫很高兴它帮助了你。别忘了标记为正确：）@AntonPetrov很高兴它帮助了你。别忘了标记为正确：）