javascript - 在列上添加底行以求和整列的值

Question

我有一个包含五列的表格，其结构如下:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-bordered">
   <tbody>
      <tr>
         <td>Timestamp</td>
         <td>Cash &amp; Carry</td>
         <td>Shop Name</td>
         <td>Amount</td>
         <td>Comments</td>
      </tr>
      <tr>
         <td>10/01/2018</td>
         <td>New Delhi Cash &amp; Carry</td>
         <td>J's Pizza Stop </td>
         <td>72.75£</td>
         <td>PAID 2018-01-11 16:53 Full Amount: 75 Discount of 3% Discount Total: 2.25</td>
      </tr>
      <tr>
         <td>13/01/2018</td>
         <td>New Delhi Cash &amp; Carry</td>
         <td>Mexican House</td>
         <td>93.42£</td>
         <td>PAID 2018-01-18 10:08 Full Amount: 96.31 Discount of 3% Discount Total: 2.8893</td>
      </tr>
      <tr>
         <td>14/01/2018</td>
         <td>New Delhi Cash &amp; Carry</td>
         <td>Mexican House</td>
         <td>67.08£</td>
         <td>PAID 2018-01-18 10:05 Full Amount: 69.15 Discount of 3% Discount Total: 2.0745</td>
      </tr>
      <tr>
         <td>18/01/2018</td>
         <td>New Delhi Cash &amp; Carry</td>
         <td>Mexican House</td>
         <td>94.00£</td>
         <td>PAID 2018-01-25 10:34 Full Amount: 96.91 Discount of 3% Discount Total: 2.9073</td>
      </tr>
      <tr>
         <td>19/01/2018</td>
         <td>New Delhi Cash &amp; Carry</td>
         <td>Mexican House</td>
         <td>48.50£</td>
         <td>PAID 2018-01-25 10:34 Full Amount: 50 Discount of 3% Discount Total: 1.5</td>
      </tr>
      <tr>
         <td>20/01/2018</td>
         <td>New Delhi Cash &amp; Carry</td>
         <td>Mexican House</td>
         <td>34.85£</td>
         <td>PAID 2018-01-25 10:33 Full Amount: 35.93 Discount of 3% Discount Total: 1.0779</td>
      </tr>
      <tr>
         <td>25/01/2018</td>
         <td>New Delhi Cash &amp; Carry</td>
         <td>Eastham Express</td>
         <td>212.97£</td>
         <td>PAID 2018-02-01 10:51 Full Amount: 219.56 Discount of 3% Discount Total: 6.5868</td>
      </tr>
      <tr>
         <td>03/02/2018</td>
         <td>New Delhi Cash &amp; Carry</td>
         <td>J's Pizza Stop </td>
         <td>14.55£</td>
         <td>Full Amount: 15 Discount of 3% Discount Total: 0.45</td>
      </tr>
   </tbody>
</table>

我想要对“金额”列的值进行求和，并在金额列下的一行中显示总金额。我的问题是，有没有办法可以做到如下图所示？

到目前为止，我看到的答案只添加了一个显示在每列下方的表页脚。是否可以只添加 1 行？

Answer 1

使用此选择器'table tbody tr:gt(0) td:nth-child(4)'

看看这段代码

var currencySymbol = '£'
var total = 0.0;
$('table tbody tr:gt(0) td:nth-child(4)').each(function() {
  total += parseFloat($(this).html().replace(currencySymbol, ''));
});

total += currencySymbol;

var $newTR = $("<tr><td colSpan='3'></td><td>"+total+"</td><td></td></tr>");
$('table tbody').append($newTR);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-bordered">
   <tbody>
      <tr>
         <td>Timestamp</td>
         <td>Cash &amp; Carry</td>
         <td>Shop Name</td>
         <td>Amount</td>
         <td>Comments</td>
      </tr>
      <tr>
         <td>10/01/2018</td>
         <td>New Delhi Cash &amp; Carry</td>
         <td>J's Pizza Stop </td>
         <td>72.75£</td>
         <td>PAID 2018-01-11 16:53 Full Amount: 75 Discount of 3% Discount Total: 2.25</td>
      </tr>
      <tr>
         <td>13/01/2018</td>
         <td>New Delhi Cash &amp; Carry</td>
         <td>Mexican House</td>
         <td>93.42£</td>
         <td>PAID 2018-01-18 10:08 Full Amount: 96.31 Discount of 3% Discount Total: 2.8893</td>
      </tr>
      <tr>
         <td>14/01/2018</td>
         <td>New Delhi Cash &amp; Carry</td>
         <td>Mexican House</td>
         <td>67.08£</td>
         <td>PAID 2018-01-18 10:05 Full Amount: 69.15 Discount of 3% Discount Total: 2.0745</td>
      </tr>
      <tr>
         <td>18/01/2018</td>
         <td>New Delhi Cash &amp; Carry</td>
         <td>Mexican House</td>
         <td>94.00£</td>
         <td>PAID 2018-01-25 10:34 Full Amount: 96.91 Discount of 3% Discount Total: 2.9073</td>
      </tr>
      <tr>
         <td>19/01/2018</td>
         <td>New Delhi Cash &amp; Carry</td>
         <td>Mexican House</td>
         <td>48.50£</td>
         <td>PAID 2018-01-25 10:34 Full Amount: 50 Discount of 3% Discount Total: 1.5</td>
      </tr>
      <tr>
         <td>20/01/2018</td>
         <td>New Delhi Cash &amp; Carry</td>
         <td>Mexican House</td>
         <td>34.85£</td>
         <td>PAID 2018-01-25 10:33 Full Amount: 35.93 Discount of 3% Discount Total: 1.0779</td>
      </tr>
      <tr>
         <td>25/01/2018</td>
         <td>New Delhi Cash &amp; Carry</td>
         <td>Eastham Express</td>
         <td>212.97£</td>
         <td>PAID 2018-02-01 10:51 Full Amount: 219.56 Discount of 3% Discount Total: 6.5868</td>
      </tr>
      <tr>
         <td>03/02/2018</td>
         <td>New Delhi Cash &amp; Carry</td>
         <td>J's Pizza Stop </td>
         <td>14.55£</td>
         <td>Full Amount: 15 Discount of 3% Discount Total: 0.45</td>
      </tr>
   </tbody>
</table>

看到了吗？计算出总金额。

资源

• :nth-child() Selector
• :gt() Selector