jQuery with table如何計算用戶輸入值的總和？

我有一個jQuery的問題，我從我的sql數據庫中獲取數組中的結果。這些項目在table tr td。每行都有一個唯一的ID。jQuery with table如何計算用戶輸入值的總和？

但是當我做一個文本框的總和或做onkeyup所有總變化也。

我是一個onKeyUp事件Qty。

例如：

數量= 3

Bedrag = 20

TOTAAL（預期）= 60

這裏是一個屏幕截圖： enter image description here

我的jQuery代碼是wron G？

jQuery(document).ready(function(){ 

    var j = 0; 
    /* COMPUTATION new item */ 
    jQuery('input[id=new_quan_'+j+']').keyup(function(){ 
     j++; 
     var new_sum = parseInt($('input[id=new_quan_'+j+']').val(), 10); 
     new_sum *= parseInt($('input[id=new_amt_'+j+']').val(), 10); 
     jQuery('input[id=new_total_'+j+']').val(new_sum); 
    }); 
});

下面是HTML和PHP代碼：

<table cellpadding="5" cellspacing="0" width="100%" id="computation_table"> 
    <tbody> 
    <tr> 
     <th>Categories</th> 
     <th>Qty</th> 
     <th>Omschrijving</th> 
     <th>Bedrag</th> 
     <th>Totaal</th> 
     <th>BTW</th> 
     <th></th> 
    </tr> 
    <? 
    $quo_com = mysql_query("SELECT * FROM jon_com_quo_computation WHERE user_code = '".$_GET['uc']."' and footnote = 'new' and active='1' ") or die (mysql_error()); 
    $get_btw = mysql_fetch_array($quo_com); 
    if ($get_btw['currency'] == 'euro') { 
     $msg_tot = '&euro;'; 
    } elseif ($get_btw['currency'] == 'usd') { 
     $msg_tot = '&#36;'; 
    } 

    $sqlview = mysql_query("SELECT * FROM jon_com_quo_computation WHERE user_code = '".$_GET['uc']."' and footnote = 'new' and active='1' ") or die (mysql_error()); 
    $j = 0; 
    while($row = mysql_fetch_array($sqlview)) { 
    ?> 
    <tr> 
     <td> 
      <input type="hidden" name="id_<?=$j?>" value="<?=$row['q_id'];?>" /> 
      <input type="hidden" name="counter" value="<?=$j?>" /> 
      <input type="text" name="category_<?=$j?>" class="text_com" value="<?=$row['category'];?>" /> 
     </td> 
     <td> 
      <input type="text" name="quantity_<?=$j?>" id="new_quan_<?=$j?>" class="text_com" value="<?=$row['quo_quantity'];?>" /> x 
     </td> 
     <td width="200"> 
      <input type="text" name="quo_definition_<?=$j?>" class="input" value="<?=$row['quo_definition'];?>" /> 
     </td> 
     <td> 
      <input type="text" name="quo_amt_<?=$j?>" id="new_amt_<?=$j?>" class="text_com" value="<?=$row['quo_amt'];?>" /> 
     </td> 
     <td id="total"> 
      <input type="text" name="quo_total_<?=$j?>" id="new_total_<?=$j?>" class="text_com" value="<?=$row['quo_total'];?>" /> 
     </td> 
     <td> 
      <input type="text" name="quo_btw_<?=$j?>" class="text_com" value="<?=$row['quo_btw'];?>" /> 
     </td> 
    </tr> 
<? 
    $j++; 
    } 
?> 
    </tbody> 
</table> 
</div> 
<br /> 
<!-- END OF COMPUTATION UPDATE --> 
<input type="submit" name="up_item_list" value="Werk de vorm" /> - <input type="submit" name="new_save_list" value="Opslaan nieuw item" /> - <a href="">Annuleren</a> 
</form>

來源

2012-12-18 Butternut

注意：始終使用數據輸入按鍵事件。 Keydown和keyup只對遊戲型應用程序有用。 –

我很確定'KeyUp'不包含用戶剛輸入的值。用相同的代碼嘗試'KeyPress'。如果用戶在其中鍵入字母，則還應該實施「try/catch」系統。 –

這是更好地使用類來找到相應的元素，而不是該ID與j建（甚至不知道它應該如何工作看您的代碼）

jQuery('.new_quan').keyup(function(){   
     var new_sum = parseInt(jQuery(this).val(), 10); 
     new_sum *= parseInt(jQuery(this).closest('tr').find('.new_amt').val(), 10); 
     jQuery(this).closest('tr').find('.new_total').val(new_sum); 
    });

和更新的PHP代碼：

while($row = mysql_fetch_array($sqlview)) { 
    ?> 
    <tr> 
     <td> 
      <input type="hidden" name="id_<?=$j?>" value="<?=$row['q_id'];?>" /> 
      <input type="hidden" name="counter" value="<?=$j?>" /> 
      <input type="text" name="category_<?=$j?>" class="text_com" value="<?=$row['category'];?>" /> 
     </td> 
     <td> 
      <input type="text" name="quantity_<?=$j?>" id="new_quan_<?=$j?>" class="text_com new_quan" value="<?=$row['quo_quantity'];?>" /> x 
     </td> 
     <td width="200"> 
      <input type="text" name="quo_definition_<?=$j?>" class="input" value="<?=$row['quo_definition'];?>" /> 
     </td> 
     <td> 
      <input type="text" name="quo_amt_<?=$j?>" id="new_amt_<?=$j?>" class="text_com new_amt" value="<?=$row['quo_amt'];?>" /> 
     </td> 
     <td id="total"> 
      <input type="text" name="quo_total_<?=$j?>" id="new_total_<?=$j?>" class="text_com new_total" value="<?=$row['quo_total'];?>" /> 
     </td> 
     <td> 
      <input type="text" name="quo_btw_<?=$j?>" class="text_com" value="<?=$row['quo_btw'];?>" /> 
     </td> 
    </tr> 
<? 
    $j++; 
    }

在這裏，我已經添加幾類，你的輸入，從而比有可能找到，甚至處理這些元素與找到.find('.new_total')和.find('.new_amt')

.closest("tr")會發現其中包含了需要更新的總所有輸入一個TR。而find('...')將僅在那個tr內部進行搜索，僅以這種方式更新相關的輸入值。

來源

2012-12-18 13:31:06

它工作的很棒！非常感謝你的解釋......對我來說這是一大幫助...... – Butternut

也許你需要使用$(this)和this.id這樣的：

jQuery(document).ready(function(){ 
    $('input[type=text]').each(function(){ 
    $(this).keyup(function(){ 
     var j = this.id.split('_')[2]; 
     var new_sum = parseInt($('input[id=new_quan_'+j+']').val(), 10); 
     new_sum *= parseInt($('input[id=new_amt_'+j+']').val(), 10); 
     jQuery('input[id=new_total_'+j+']').val(new_sum); 
    }); 
    }); 
});

來源

2012-12-18 13:32:18 netdjw

jQuery with table如何計算用戶輸入值的總和？

回答

相關問題