2013-04-12 185 views
0

喜有一种形式,动态地添加一个按钮单击一个表行,但现在我想执行计算到我的表中的列像我有一个科拉姆名prevqty,thisqty,数量(这是总数量),速度和数量,我有在总量被存储我已经尝试了计算总场,但它似乎犯规工作如何在jQuery的执行上动态添加表行计算

这里是我的脚本

$(document).ready(function() { 
var currentItem = $('#items').val(); 

$('#data').on('keyup', '.prevqty, .thisqty, .qty, .rate, .cal', calculateRow); 

$('#addnew').click(function() { 
    currentItem++; 
    $('#items').val(currentItem); 
    $('#data').append('<tr>\n\ 
     <td align="center"><input type="text" size="6" maxlength="6" maxlength="6" name="ord_' + currentItem + '" class="form-input-oth" onkeyup="return copy(this.val());"/></td>\n\ 
      <td align="center"><input type="text" size="6" maxlength="6" maxlength="6" name="srno_' + currentItem + '" class="form-input-oth"/></td>\n\ 
     <td align="center"><textarea name="descrip_' + currentItem + '" cols="70" class="form-input-textareasm"></textarea></td>\n\ 
      <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="unit_' + currentItem + '" class="form-input-rate"/></td>\n\ 
      <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="prevqty_' + currentItem + '" class="prevqty form-input-rate" onkeyup="calculateRow();"//></td>\n\ 
      <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="thisqty_' + currentItem + '" class="thisqty form-input-rate" onkeyup="calculateRow();"//></td>\n\ 
      <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="qty_' + currentItem + '" class="qty form-input-rate" onkeyup="calculateRow();"/></td>\n\ 
      <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="rate_' + currentItem + '" class="rate form-input-rate" onkeyup="calculateRow();"/></td>\n\ 
      <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="amt_' + currentItem + '" class="cal form-input-amt" onkeyup="calculateRow();"/></td>\n\ 
     </tr>' 
        ); 
}); 

function calculateSum() { 
    var sum = 0; 
    $(".cal").each(function() { 
     if (!isNaN(this.value) && this.value.length != 0) { 
      sum += parseFloat(this.value); 
     } 
    }); 
    $("#total").val(sum.toFixed(2)); 
} 
function calculateRow() { 
    var cost = 0; 
    var $row = $(this).closest("tr"); 
    var prevqty = parseFloat($row.find('.prevqty').val()); 
    var thisqty = parseFloat($row.find('.thisqty').val()); 
    var qty = parseFloat($row.find('.qty').val(prevqty + thisqty)); 
     //parseFloat($row.find('.qty').val()); 
    alert(qty); 
    if (isNaN(qty)) { 
     $row.find('.qty').val("0"); 
    } else { 
     $row.find('.qty').val(qty); 
    } 
    // changed the following line to only look within the current row 
    var rate = parseFloat($row.find('.rate').val()); 

    cost = qty * rate; 

    if (isNaN(cost)) { 
     $row.find('.cal').val("0"); 
    } else { 
     $row.find('.cal').val(cost); 
    } 
    calculateSum(); 
}}); 

我有一个工作小提琴在这里prevqty和thisqty工作正常,但率和金额计算不起作用看到这里http://jsfiddle.net/rey_kahn/YS4N2/

回答

2

您的每一次$("#addnew").click事件触发,你会想重新绑定keyup/calculateRow方法。例如:

$('#addnew').click(function() { 
    currentItem++; 
    $('#items').val(currentItem); 
    $('#data').append('<tr>\n\ 
     <td align="center"><input type="text" size="6" maxlength="6" maxlength="6" name="ord_' + currentItem + '" class="form-input-oth" onkeyup="return copy(this.val());"/></td>\n\ 
      <td align="center"><input type="text" size="6" maxlength="6" maxlength="6" name="srno_' + currentItem + '" class="form-input-oth"/></td>\n\ 
     <td align="center"><textarea name="descrip_' + currentItem + '" cols="70" class="form-input-textareasm"></textarea></td>\n\ 
      <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="unit_' + currentItem + '" class="form-input-rate"/></td>\n\ 
      <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="prevqty_' + currentItem + '" class="prevqty form-input-rate" onkeyup="calculateRow();"//></td>\n\ 
      <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="thisqty_' + currentItem + '" class="thisqty form-input-rate" onkeyup="calculateRow();"//></td>\n\ 
      <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="qty_' + currentItem + '" class="qty form-input-rate" onkeyup="calculateRow();"/></td>\n\ 
      <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="rate_' + currentItem + '" class="rate form-input-rate" onkeyup="calculateRow();"/></td>\n\ 
      <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="amt_' + currentItem + '" class="cal form-input-amt" onkeyup="calculateRow();"/></td>\n\ 
     </tr>' 
        ); 
    $('#data').off('keyup').on('keyup', '.prevqty, .thisqty, .qty, .rate, .cal', calculateRow); 
}); 

请注意,$("#data").off('keyup').on(...在事件结束?这应该保持你的新行计算正确。

UPDATE

审查你在的jsfiddle发布注释代码后,我发现了一些HTML错误,但我认为真正的问题是你设置/计算qty的方式。看看这个更新小提琴:http://jsfiddle.net/YS4N2/1/

在那里,你会看到我设置的数量从输入它如何用于计算的目的是分开的。这工作正常。

+0

但计算并不 – user2274075

+0

工作再次审查代码后,我不知道为什么你'绑定使用jQuery keyup'然后再有'onkeyup'在调用每个'input'元素都调用相同的calculateRow()方法。这是为什么? – shanabus

+0

因为我需要把它称为everytym当用户广告投入的场地 – user2274075

0

在开始处添加默认行和总计。

还有一些小的变化。

<table border="1px" width="90%" id="data">     
       <tr> 
       <td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Order</font><span></span></label></td> 
       <td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Sr No.</font><span></span></label></td> 
       <td width="580px" align="center"><label for=""><font color="#0099FF" size="3px">Description</font><span></span></label></td> 
       <td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Unit</font><span></span></label></td> 
       <td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Previous Qty.</font><span></span></label></td> 
       <td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">This Bill Qty</font><span></span></label></td> 
       <td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Total Quantity</font><span></span></label></td> 
       <td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Rate</font><span></span></label></td> 
       <td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Amount</font><span></span></label></td> 
       </tr> 
       <tr> 
       <td><input type="text" size="6" maxlength="6" maxlength="6" name="ord_' + currentItem + '" class="form-input-oth" onkeyup="return copy(this.val());"/></td> 
       <td><input type="text" size="6" maxlength="6" maxlength="6" name="srno_' + currentItem + '" class="form-input-oth"/></td>  
       <td><textarea name="descrip_' + currentItem + '" cols="70" class="form-input-textareasm"></textarea></td>  
       <td><input type="text" size="6" maxlength="9" maxlength="6" name="unit_' + currentItem + '" class="form-input-rate"/></td>  
       <td><input type="text" size="6" maxlength="9" maxlength="6" name="prevqty_' + currentItem + '" class="prevqty "/></td>  
       <td><input type="text" size="6" maxlength="9" maxlength="6" name="thisqty_' + currentItem + '" class="thisqty "/></td>  
       <td><input type="text" size="6" maxlength="9" maxlength="6" name="qty_' + currentItem + '" class="qty "/></td>  
       <td><input type="text" size="6" maxlength="9" maxlength="6" name="rate_' + currentItem + '" class="rate "/></td>  
       <td><input type="text" size="6" maxlength="9" maxlength="6" name="amt_' + currentItem + '" class="cal"/></td>  
       </tr> 
       <tr> 
       <td colspan="8"></td> 
       <td><input type="text" id="total"/></td> 
       </tr> 


检查更新的链接:http://jsfiddle.net/YS4N2/9/