Twitter Bootstrap Question posted in

Adding bottom row on column that sums the values of the entire column-Twitter bootstrap

I have a table with five columns that has the following structure:

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

I want to sum the values of the Amount column and display a total amount in a row under the amount column. My question is, is there a way in which that can be done so that it can look like the picture below?enter image description here

So far the answers I’ve seen only added a table footer that displays under every column. Is it at all possible to add just 1 row?

Tags:

7

Answers


  1. 0

    Try keeping the info in a JSON file, then generating the table with Javascript’s createElement() and appendChild() methods. With all the information in the JSON file, you can easily sum the amounts and add another node at the end of each table row with special formatting with the :last-child selector.

    Login or Signup to reply.
  2. 0

    You can append a total row to the 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>" )
}
    Login or Signup to reply.
  3. 0

    As said in the comments, you can simply append a nearly empty <tr> to your table :

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

    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>');
    table{
  border: none !important;
  border-collapse: collapse;
}

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

.no-border{
  border: none !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>
   </tbody>
</table>
    Login or Signup to reply.
  4. 0

    Try the following:

    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>
    Login or Signup to reply.
  5. 0

    Yes, there is an DOM attribute called colspan, it is used to control how many columns does a <td> cross over.

    You can add a row and some CSS to do the trick:

    <style>
    tr:last-child>td[colspan] {
        border: none;
    }
</style>
<table>
    ...
    <tr><td colspan="3"></td><td>638.12€</td><td colspan="1"></td>
</table>
    Login or Signup to reply.
  6. 0

    You can append footer, and just style borders with 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>
    Login or Signup to reply.
  7. 0

    Use this selector 'table tbody tr:gt(0) td:nth-child(4)'

    Look at this code snippet

    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>

    See? the total amount was calculated.

    Resources

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search