点击HTML列的jQuery小计

Question

在以下结构中:

<input type="text" class="form-control" id="price" placeholder="Price">
<input type="text" class="form-control" id="sum_amount" placeholder="Total amount">    
<input type="text" class="form-control" id="sum_total" placeholder="Grand total">      
<table class="table" id="tab1">
                        <thead>
                            <tr>
                                <th>Price</th>
                                <th>Amount</th>
                                <th>Total</th>
                                <th>
                                </th>
                            </tr>
                        </thead>
                        <tbody class="tableSell">
                            <tr>
                                <td>625</td>
                                <td>1</td>
                                <td>625</td>
                            </tr>
                            <tr>
                                <td>638</td>
                                <td>2.5</td>
                                <td>1595</td>
                            </tr>
                            <tr>
                                <td>640</td>
                                <td>4</td>
                                <td>2560</td>
                            </tr>
                        </tbody>
                    </table>

我需要根据单击的行计算"金额"one_answers"总数"列的小计。例子:如果点击第二行:'Total amount' = 3.5， 'Grand Total ' = 2220

我已经能够将价格复制到第一个字段

$(document).ready(function(){
  $("#tab1 tr").click(function(){
    $("#price").val($(this).find(':first-child').text());
  });
});

但是我不知道怎么做小计。

工作空间:http://jsfiddle.net/Tge9A/1/

Answer 1

$(document).ready(function(){
  $("#tab1 tr").click(function(){
      var amount = parseFloat($(this).find(':eq(1)').text());
      var price = $(this).find(':first-child').text();
      var total = 0;
      //add one to amount and get this rows total
      amount += 1;
      total = amount * price;
      var grandTotal = 0;
      var sum_amount = 0;  
 //update the row 
 $(this).find(':eq(1)').text(amount);
 $(this).find(':eq(2)').text(total); 
  var count = 0;
  //now loop through the rows and get the totals - the count is to ignore the first row as it is table headings
  $.each($('table tr'), function( i, val ) {
      if (count > 0){
          sum_amount += parseFloat($(val).find(':eq(1)').text());
          grandTotal += parseFloat($(val).find(':eq(2)').text());
      }
      count ++;

});

  $('#sum_amount').val(sum_amount);
  $('#sum_total').val(grandTotal);

});});

http://jsfiddle.net/Tge9A/2/

Answer 2

EDITED:修正parseFloat()并添加JSFiddle。

尝试将总数初始化为该行中的当前总数。然后循环到前面的所有行，并将它们添加到总计中，如下所示(这将进入.click()函数):

var totalAmount = parseFloat($(this).children('td').eq(1).text());
var grandTotal = parseFloat($(this).children('td').eq(2).text());
$(this).prevAll('tr').each(function() {
    totalAmount += parseFloat($(this).children('td').eq(1).text());
    grandTotal += parseFloat($(this).children('td').eq(2).text());
});

JSFiddle

您可能还想指定您的选择器为您的点击事件更像:

$('#tab1 > tbody > tr')

这将防止解析错误，因为你的thead部分的标题行不会被选中。