獲取表格總計

Question

我有一個html表格，我也有一個動態添加行的選項。

      <tbody> 
          <tr style="display: none" id="invoiceRow"> 
           <td><textarea></textarea></td> 
           <td class="va_middle"><input type="text" name="quantity" class="mini" /></td> 
           <td class="va_middle"><input type="text" name="rate" class="mini" /></td> 
           <td class="va_middle"><input type="text" name="amount" class="mini" /></td> 
           <td> 
            <a onclick="deleteInvoiceRow(this);" class="btn btn-small"> 
             <i class="icon-remove"></i>      
            </a> 
           </td> 
          </tr> 
          <tr> 
           <td><textarea></textarea></td> 
           <td class="va_middle"><input type="text" name="quantity" class="mini" /></td> 
           <td class="va_middle"><input type="text" name="rate" class="mini" /></td> 
           <td class="va_middle"><input type="text" name="amount" class="mini" /></td> 
           <td> 
            <a onclick="deleteInvoiceRow(this);" class="btn btn-small"> 
             <i class="icon-remove"></i>      
            </a> 
           </td> 
          </tr> 
          <tr> 
           <td colspan="2"><a onclick="addNewInvoiceRow();"><i class="icon-plus-sign right"></i></a></td> 
           <td class="va_middle" colspan="3">&nbsp; <strong>Total: &nbsp; &nbsp;</strong><input type="text" name="rate" class="total" /></td> 
          </tr> 
         </tbody> 

我想獲得每行的總數並將其更新到最後tr中的總字段。

我該如何處理jQuery？並更新值的更改值。

Answer 1

我會這樣做的方式是通過向TABLE標籤添加幾個監聽器，並假設名稱爲「amount」的輸入將等於「rate」與「quantity」的乘積。該代碼可能看起來像：

function calcTotalTable() { 
    var total = 0; 
    $('my_table input[name="amount"]').each(function(){ 
     // add some validation 
     total += $j(this).val(); 
    }); 

    $('my_table input.total').val(total); 
} 

$('my_table').on('change', 'input[type="text"]', function() { 
    var $row = $(this).closest('tr'), 
     // you may need to add some validation before the calculation 
     total = $row.find('input[name="quantity"]').val() * $row.find('input[name="rate"]').val(); 
    $row.find('input[name="amount"]').val(total); 
    calcTotalTable(); 
}).on('click', 'a.btn btn-small', function() { // theses will handle the delete btn 
     $(this).closest('tr').remove(); 
     calcTotalTable(); 
    }); 

當然，你將需要照顧驗證和格式化的

，但代碼會做的基本過程。我沒有測試這個代碼，但會給你一個總體思路。 我希望有幫助，最好！