2013-04-17 55 views
1

您好我有一个表格,它可以动态地从外部php文件添加表格行,当用户点击添加按钮到目前为止一切正常,但我有字段names'Qty”,这将在数字输入,并应计算出总的是我创建了一个计算功能,但其仅在第一行的工作可以在它应该如何在这里完成 任何人的帮助是我的脚本如何使用jquery在动态添加的表格行上创建计算

$(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" /> 
+0

我认为你应该使用'.live'这一点。 – ncm

+0

是我做了,它的工作,但可以帮助我与我的第一个问题因为在javascript中创建的变量doesnt似乎工作 – user2274075

+0

好的问题我的意思是calcRow工作时,你做任何'.qty'的关键?你想计算每行的总和? – ncm

回答

0

变化$('#detail').on('keyup', '.qty', calculateRow());as

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