在列上添加底行，用于汇总整个列的值

时间：2018-02-05 14:32:09

标签： javascript jquery html html-table

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

<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>

我想总结Amount列的值，并在amount列下显示一行中的总金额。我的问题是，有没有办法让它看起来如下图所示？enter image description here

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

7 个答案:

答案 0 :(得分：1)

尝试将信息保存在JSON文件中，然后使用Javascript的createElement()和appendChild()方法生成表格。利用JSON文件中的所有信息，您可以轻松地对金额求和，并在每个表行的末尾添加另一个节点，并使用:last-child选择器进行特殊格式化。

答案 1 :(得分：1)

您可以将总行附加到table 

function addTotalRow()
{
   //remove existing total row
   $( ".table-bordered tr.totalRow" ).remove();

   //sum of all values
   var sum = 0;
   $( ".table-bordered tr" ).each( function(){
     var fourthTdValue = parseFloat( $(this).find("td:eq(3)").text() ); //get 4th td value and parseFloat the same
     sum += isNaN( fourthTdValue ) ? 0 : fourthTdValue;
   });

   //append the total row
   $( ".table-bordered" ).append( "<tr class='totalRow'><td></td><td></td><td></td><td>" + sum + "£</td><td></td></tr>" )
}

答案 2 :(得分：1)

如评论中所述，您只需在表格中添加一个几乎为空的<tr>：

var total = 0;
$('table tr:not(:first) td:nth-of-type(4)').each(function(){
  total += +$(this).text().slice(0,-1);
});

$('table').append('<tr><td class="no-border"></td><td class="no-border"></td><td class="no-border"></td><td>'+total+'£</td><td class="no-border"></td></tr>');

＆＃13;
＆＃13; 
var total = 0;
$('table tr:not(:first) td:nth-of-type(4)').each(function(){
  total += +$(this).text().slice(0,-1);
});

$('table').append('<tr><td class="no-border"></td><td class="no-border"></td><td class="no-border"></td><td>'+total+'£</td><td class="no-border"></td></tr>');
＆＃13; 
table{
  border: none !important;
  border-collapse: collapse;
}

table td{
  border: 1px solid black !important;
}

.no-border{
  border: none !important;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

尝试以下方法：

var amount = 0;
$('tr').not(':first').not(':last').each(function(i, item){
  amount += parseFloat($(item).children().eq(3).text());
});

$('.total').text(amount + '£');
.table-bordered{
  border: none !important;
}
tr:last-child > td{
  border: none;
  border-top: 1px solid #dddddd;
}
.total{
  border: 1px solid black !important;
}
<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>
      <tr><td></td><td></td><td></td><td class="total"></td><td></td></tr>
   </tbody>
</table>

答案 4 :(得分：1)

是的，有一个名为colspan的DOM属性，它用于控制<td>跨越的列数。

你可以添加一行和一些CSS来实现这个技巧：

<style>
    tr:last-child>td[colspan] {
        border: none;
    }
</style>
<table>
    ...
    <tr><td colspan="3"></td><td>638.12€</td><td colspan="1"></td>
</table>

答案 5 :(得分：1)

您可以添加页脚，并使用css

设置边框样式 

var tds = $('.table-bordered tr:not(:first-child) td:nth-child(4)')

var amount = 0;
tds.each(function(k, td) {
  amount += parseFloat($(td).text().substring(-1, $(td).text().length - 1));
})
$('.table-bordered').append('<tfoot><tr><td colspan="3"></td><td>' + amount + '£</td><td></td><tr>')
<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>

答案 6 :(得分：1)

使用此选择器Insert into Trainer (TrainerNo, TrainerName, TrainerDesc) values ('T5690146', 'Mary Hoe', ...)

请查看此代码段

'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);

请参阅？计算总金额。

资源

相关问题
最新问题