2016-04-16 75 views
0

我有一個onkeyup方法來自動更新每個行標籤。在表格末尾有一個標籤標記,自動更新總和。我有問題,更新的最後標籤作爲列的總和,基於表TD的onkeyup元素求和表列TD

這裏是我的代碼

<table class="display" cellspacing="0" width="100%" id="paymentTable"> 
    <thead> 
    <th style="width: 1%;">NO</th> 
    <th style="width: 30%;">MATA UANG</th> 
    <th>RATE</th> 
    <th>SETORAN</th> 
    <th>TOTAL IDR</th> 
    </thead> 
    <tbody> 
    <?php 
    $i = 1; 
    while ($row = $result->fetch_array()) { 
     echo "<tr>"; 
     echo "<td style='width: 1%; '>$row[curr_id]</td>"; 
     echo "<td>$row[curr_code] - $row[curr_desc]</td>"; 
     echo "<td><input type='hidden' value='$row[conv_rate]' id='convRate$i'>$row[conv_rate]</td>"; 
     echo "<td><input type='text' onkeyup='processCurr($i);' id='inputCurr$i'/></td>"; 
     echo "<td><label id='calculatedCurr$i' class='calculatedCurr'></label></td>"; 
     echo "</tr>"; 
     $i++; 
    } 
    ?> 
    </tbody> 
</table><br/> 
TOTAL = <label id='totalSumPayment'></label> 

和我的javascript,

<script> 
    $('#paymentTable').dataTable(); 
    function processCurr(param){  
     var inputcurr= $('#inputCurr'+param).val(); 
     var conversion = $('#convRate'+param).val(); 
     $('#calculatedCurr'+param).html(inputcurr * conversion); 
     calculateSum(); 
    } 

    function calculateSum(){ 
     var sum = 0; 
     //iterate through each textboxes and add the values 
     $(".calculatedCurr").each(function() { 
      //add only if the value is number 
      if (!isNaN(this.value) && this.value.length != 0) { 
       sum += parseFloat(this.value); 
//    $(this).css("background-color", "#FEFFB0"); 
      } 
      else if (this.value.length != 0){ 
//    $(this).css("background-color", "red"); 
      } 
     }); 

    $("#totalSumPayment").val(sum.toFixed(2)); 
    } 
</script> 

我的問題是,在calculateSum()沒有按由於沒有任何價值顯示在<label>上,因此沒有按預期工作。我得到錯誤= TypeError:this.value是未定義的螢火蟲。請幫我....

+0

這裏類calculateCurr的元素不是文本框。所以this.value不會給你正確的值。正確的值在.calculatedCurr元素的內部html中。 –

回答

1

this沒有指向一個特定的元素。您必須使用$.each函數中的參數。

 $(".calculatedCurr").each(function(key, value) { 
     //add only if the value is number 
     if (!isNaN(value) && value.length != 0) { 
      sum += parseFloat(value); 
//    $(key).css("background-color", "#FEFFB0"); 
     } 
     else if (value.length != 0){ 
//    $(key).css("background-color", "red"); 
     } 
     }); 
+0

謝謝你的真棒.. –

1

您的代碼的問題在下面給出。

//iterate through each textboxes and add the values 
     $(".calculatedCurr").each(function() { 
      //add only if the value is number 
      if (!isNaN(this.value) && this.value.length != 0) { 
       sum += parseFloat(this.value); 
//    $(this).css("background-color", "#FEFFB0"); 
      } 
      else if (this.value.length != 0){ 
//    $(this).css("background-color", "red"); 
      } 
     }); 

這裏.calculatedCurr元素不是文本boxes.They是labels.So THIS.VALUE不會得到你正確的價值。正確的值在.calculatedCurr元素內的HTML。