更新總在使用jQuery

錶行我有一個表更新總在使用jQuery

<table> 
    <tbody> 
    <tr> 
     <td><input type="text" name="quantity" /></td> 
     <td><input type="text" name="price" /></td> 
     <td><input type="text" name="total" disabled /> 
    </tr> 
    <tr> 
     <td><input type="text" name="quantity" /></td> 
     <td><input type="text" name="price" /></td> 
     <td><input type="text" name="total" disabled /> 
    </tr> 
    <tr> 
     <td><input type="text" name="quantity" /></td> 
     <td><input type="text" name="price" /></td> 
     <td><input type="text" name="total" disabled /> 
    </tr> 
    <tr> 
     <td><input type="text" name="quantity" /></td> 
     <td><input type="text" name="price" /></td> 
     <td><input type="text" name="total" disabled /> 
    </tr> 
    </tbody> 
</table>

如何更新的總輸入字段時，在數量或價格的變化會發生什麼？

我也曾想過像

$('table tbody tr td').filter(':nth-child(1), :nth-child(2)').children('input').change(function() { 
    $(this).parent('td').siblings('td').filter(':nth-child(3)').val(?); 
});

，但它似乎有點不方便。

來源

2014-09-03 Jamgreen

許多易於閱讀和控制，如果你可以指定一些虛擬類，數量，價格和總輸入。

事情是這樣的：

HTML

<table> 
    <tbody> 
    <tr> 
     <td><input type="text" class="qty" name="quantity" /></td> 
     <td><input type="text" class="prc" name="price" /></td> 
     <td><input type="text" class="total" name="total" disabled /> 
    </tr> 
    <tr> 
     <td><input type="text" class="qty" name="quantity" /></td> 
     <td><input type="text" class="prc" name="price" /></td> 
     <td><input type="text" class="total" name="total" disabled /> 
    </tr> 
    <tr> 
     <td><input type="text" class="qty" name="quantity" /></td> 
     <td><input type="text" class="prc" name="price" /></td> 
     <td><input type="text" class="total" name="total" disabled /> 
    </tr> 
    <tr> 
     <td><input type="text" class="qty" name="quantity" /></td> 
     <td><input type="text" class="prc" name="price" /></td> 
     <td><input type="text" class="total" name="total" disabled /> 
    </tr> 
    </tbody> 
</table>

腳本

$('table tbody tr').find('.qty, .prc').on('keyup',function() { 

    var parent = $(this).parents('tr'); 
    var quantity = parseInt(parent.find('.qty').val())||0; 
    var price = parseInt(parent.find('.prc').val())||0; 

    parent.find('.total').val(quantity*price); 


});

檢查工作示例here

來源

2014-09-03 14:29:46 SSA

就我個人而言，我不喜歡根據他們的位置選擇元素。如果你稍後改變它們，或者添加另一個代碼就會被破壞。我會做這樣的事情：

$(this).closest('tr').find('input[name=total]').val(?);

來源

2014-09-03 13:51:37 ChrisThompson

您可以使用：

$('table tbody tr td').find('input').keyup(function() { 
    var total=0; 
    total=(parseInt($(this).parent('td').siblings('td').not(':nth-child(3)').find('input').val())||0)+(parseInt($(this).val())||0); 
    $(this).closest('tr').find('input:last').val(total) 
});

Working Demo

來源

2014-09-03 13:52:45

更新總在使用jQuery

回答

相關問題