javascript - jquery 计算动态添加的行

Question

我已经动态添加了行，并且我想自动计算其值。这是我的部分代码:

<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>

还有jquery

    $('input').keyup(function(){ // run anytime the value changes

     var firstValue = parseFloat($('#itemQty').val()); // get value of field
     var secondValue = parseFloat($('#itemPrice').val()); //
     $('#added').html(firstValue * secondValue); // add them and output it
      });

问题在于该脚本仅计算第一行。

Answer 1

您的网页中有重复的 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>

Javascirpt/JQuery:

$(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 2 行: http://jsfiddle.net/Lvjff4ga/