获取表格总计

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(); 
    }); 

当然，你将需要照顾验证和格式化的

，但代码会做的基本过程。我没有测试这个代码，但会给你一个总体思路。 我希望有帮助，最好！