php - 如何使用 jquery 在动态添加的表行上创建计算

Question

您好，我有一个表单，当用户单击添加按钮时，它会从外部 php 文件动态添加表格行，到目前为止一切正常，但我有字段名称“Qty”，它将以数字形式输入并计算总的来说，我已经创建了一个计算函数，但它仅适用于第一行，有人可以帮助解决它应该如何完成吗 这是我的脚本

$(document).ready(function(){
                $('#detail').on('keyup', '.qty', calculateRow());
                $('#addnew').click(function(){

                    var ctr = $('#items').val();
                    ctr++;

                    $.post('job_srch.php', {ctr : ctr}, function(data) {
                          $(data).appendTo('#detail');

                          $('#items').val(ctr);                        
                    });
                });

function calculateSum() {

    var sum = 0;
    //iterate through each textboxes and add the values
    $(".qty").each(function (){
        //add only if the value is number
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }
    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#total").val(sum.toFixed(2));
}

function calculateRow() {
    $('.qty').keyup(function () {
        //alert("entered");
        var $row = $(this).closest("tr");
        var qty = parseFloat($row.find('.qty').val());

        calculateSum();
    });
}
   });

这是我的php

session_start();
require("includes/dbconnect.php");
include ('includes/function.php');

$zdb = $_SESSION["zdbyear"];
mysql_select_db($zdb);

if ($_REQUEST["ctr"]){
    $ctr = $_REQUEST["ctr"];
    //echo '<link rel="stylesheet" href="css/chosen.css" />';
echo '<tr>

   <td align="center"><input type="text" size="6" maxlength="6" maxlength="6" name="srno_'.$ctr.'" class="form-input-oth"/></td>
   <td align="center"><select data-placeholder="Party" style="width:300px;" name="item_'.$ctr.'" class="chzn-select-deselect" >
                                  <option value=""></option>';
                      $res = mysql_query("SELECT * FROM `items`") or die(mysql_error());
                      while ($row = mysql_fetch_array($res)) {
                             echo "<option value='$row[accode]'>$row[name]</option>";
                      }
    echo '</select></td>';
    echo '<td align="center"><input type="text" id="qty" size="6" maxlength="9" maxlength="6" name="qty_'.$ctr.'" class="qty form-input-amt"/></td>

                      </tr>';
}
else{
    echo "ERROR";
}

这是我的html

           <table id="detail" border="1px" width="80%">
          <tr>
             <td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Sr No.</font><span></span></label></td>
             <td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">item</font><span></span></label></td>
             <td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Quantity</font><span></span></label></td>
          </tr>

              <tr>
                  <td align="center"><input type="text" size="6" maxlength="6" maxlength="6" name="ord_0" class="form-input-oth"/></td>
                  <td align="center"><select data-placeholder="Party" style="width:300px; text-align: left;" name="item_0" class="chzn-select-deselect" >
                          <option value=""></option>
                          <?php
                                $iqry = mysql_query("SELECT * FROM `items` ") or die(mysql_error());
                                    while($trow= mysql_fetch_array($iqry)){
                                        echo "<option value=$trow[accode]>$trow[name]</option>";
                                    }
                          ?>
                      </select></td>
                  <td align="center"><input id="qty" type="text" size="6" maxlength="9" maxlength="6" name="qty_0" class="qty form-input-amt" onkeyup="return calculateSum(); "/></td>
              </tr>
<input type="button" id="addnew" class="classname" name="addnew" value="+" /> 
                          <input type="text" id="items" name="items" value=" 0" /> 

Answer 1

更改 $('#detail').on('keyup', '.qty', calculateRow()); as

$(document).on('keyup', '.qty', function(){
calculateRow(); // or code here
});