jQuery 计算动态添加的行

jquery calculate on dynamically added rows

本文关键字：添加 动态 计算 jQuery      更新时间：2023-09-26

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

<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
      });

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

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

$('input','#itemsTable').change(function(){
    var tot = 0;
    $('tbody tr','#itemsTable').each(function(){
       tot += $('[name=itemQty'[']]', this).val() * $('[name=itemPrice'[']]', this).val();
    });//each
    $('#added').html(tot);
});
相关文章：