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>

我需要计算＆＃39; Amount＆＃39;的小计。和＆＃39; Total＆＃39;基于单击行的列。例：如果点击了第二行：＆＃39;总金额＆＃39; = 3.5，＆＃39;总计＆＃39; = 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

已编辑：已修复为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部分中的标题行不会被选中。

点击时HTML列的jQuery小计

2 个答案: