jQuery可以计算的表单，包括单选改变价格，select改变价格，动态添加删除行计算

jQuery可以计算的表单，包括单选改变价格，select改变价格，动态添加删除行计算

各种表单情况的计算

演示

JavaScript Code

1. <script type="text/javascript">
2. var currentRow = 3;
3. $(document).ready(function(){
4. $(‘#calx‘).calx();
5. $(‘#add_item‘).click(function(){
6. var $calx = $(‘#calx‘);
7. currentRow++;
8. $calx.append(‘<tr>\
9. <td><input type="text" id="A‘+currentRow+‘" value="" /></td>\
10. <td><input type="text" id="B‘+currentRow+‘" value="" data-format="$ 0,0[.]00" /></td>\
11. <td><input type="text" id="C‘+currentRow+‘" value="" data-format="0" /></td>\
12. <td><input type="text" id="D‘+currentRow+‘" value="" data-format="0[.]00 %" /></td>\
13. <td><input type="text" id="E‘+currentRow+‘" value="" data-format="$ 0,0[.]00" data-formula="($B‘+currentRow+‘*$C‘+currentRow+‘)*(1-$D‘+currentRow+‘)" /></td>\
14. <td><input type="button" value="remove" class="btn-remove" /></td>\
15. </tr>‘);
16. //update total formula
17. $(‘#F1‘).attr(‘data-formula‘,‘SUM($E1,$E‘+currentRow+‘)‘);
18. $calx.calx(‘refresh‘);
19. });
20. $(‘#calx‘).on(‘click‘, ‘.btn-remove‘, function(){
21. $(this).parent().parent().remove();
22. $(‘#calx‘).calx(‘refresh‘);
23. });
24. });
25. </script>

XML/HTML Code

1. <table id="calx" width="80%" align="center">
2. <thead>
3. <tr>
4. <td style="width:250px">Item Name</td>
5. <td style="width:150px">Item Price</td>
6. <td style="width: 50px">Qty</td>
7. <td style="width: 80px">Discount</td>
8. <td style="width:150px">Sub Total</td>
9. <Td></Td>
10. </tr>
11. </thead>
12. <tbody id="itemlist">
13. <tr>
14. <td><input type="text" id="A1" value="HDD Baracuda Black 2TB" /></td>
15. <td><input type="text" id="B1" value="" data-format="$ 0,0[.]00" /></td>
16. <td><input type="text" id="C1" value="" data-format="0" /></td>
17. <td><input type="text" id="D1" value="" data-format="0[.]00 %" /></td>
18. <td><input type="text" id="E1" value="" data-format="$ 0,0[.]00" data-formula="($B1*$C1)*(1-$D1)" /></td>
19. <td><input type="button" value="remove" class="btn-remove" /></td>
20. </tr>
21. <tr>
22. <td><input type="text" id="A2" value="BenQ LED Monitor 21 inch" /></td>
23. <td><input type="text" id="B2" value="" data-format="$ 0,0[.]00" /></td>
24. <td><input type="text" id="C2" value="" data-format="0" /></td>
25. <td><input type="text" id="D2" value="" data-format="0[.]00 %" /></td>
26. <td><input type="text" id="E2" value="" data-format="$ 0,0[.]00" data-formula="($B2*$C2)*(1-$D2)" /></td>
27. <td><input type="button" value="remove" class="btn-remove" /></td>
28. </tr>
29. <tr>
30. <td><input type="text" id="A3" value="Intel Processor i3 2328" /></td>
31. <td><input type="text" id="B3" value="" data-format="$ 0,0[.]00" /></td>
32. <td><input type="text" id="C3" value="" data-format="0" /></td>
33. <td><input type="text" id="D3" value="" data-format="0[.]00 %" /></td>
34. <td><input type="text" id="E3" value="" data-format="$ 0,0[.]00" data-formula="($B3*$C3)*(1-$D3)" /></td>
35. <td><input type="button" value="remove" class="btn-remove" /></td>
36. </tr>
37. </tbody>
38. <tfoot>
39. <tr>
40. <td colspan="4" style="text-align: right">Total Price :</td>
41. <td id="F1" data-format="$ 0,0[.]00" data-formula="SUM($E1,$E3)"></td>
42. <Td></Td>
43. </tr>
44. </tfoot>
45. </table>
46. <input type="button" value="Add new item" id="add_item" />

原文地址:http://www.freejs.net/article_biaodan_155.html

jQuery可以计算的表单，包括单选改变价格，select改变价格，动态添加删除行计算,布布扣,bubuko.com