the Web Design Speciailist
Jquery 動態新增欄位,並計算欄位輸入的值
2017-09-08 17:21:44  Jquery

Jquery動態新增欄位,並計算欄位輸入的值做總合計算,

很適合用到一些總計算,但又不需先把頁面送出,更不需要用到ajax


DEMO CODE :https://jsbin.com/zuligomigi/edit?html,js,output


我整理的程式碼

  1. $(document).ready(function() {
  2.     $('body').on('click','#add_row',function(){
  3.         $('#template').find('.row_data').clone().appendTo($('#append_position'));
  4.     });
  5.   
  6.     $('#example').on('change', '.a_row', function(event) {
  7.         event.preventDefault();
  8.         var row_total = 0;
  9.         $('.a_row').each(function(index, el) {
  10.             row_total = row_total + Number($(this).val());
  11.         });
  12.   
  13.         $('#total').html('a_row_total = '+ row_total);
  14.         console.log(row_total);
  15.     });
  16. });