Sum all columns except first column

Advertisements

I’m trying to sum all columns except the first column. My HTML code is;

<div id="TableDetails">
                <table id="detailTable" style="width:100%">
                    <thead>
                        <tr>
                            <th>Popname</th>
                            <th>Expense</th>
                            <th>Income</th>
                            <th>Margin</th>
                            <th>Margin Profit</th>
                            <th>Time</th>
                        </tr>
                    </thead>
                    <tbody id="details">
                    </tbody>
                    <tfoot id="totalValues">
                        <tr>
                            <th>Total: </th>
                            <th id="totalofIncome"></th>
                            <th id="totalofExpense"></th>
                            <th id="totalofMargin"></th>
                            <th id="totalofMarginProfit"></th>
                            <th id="totalofTime"></th>
                        </tr>
                    </tfoot>
                </table>
            </div>

And I’m filling the tbody with for loop like this in jquery

for (var i = 0; i < result.Data.length; i++) {
                data += '<tr>' +
                    '<td> ' + result.Data[i].Popname + '</td>' +
                    '<td> ' + parseFloat(result.Data[i].Income.replace(",", ".")) + '</td>' +
                    '<td>' +  parseFloat(result.Data[i].Expense.replace(",", ".")) + '</td>' +
                    '<td>' +  parseFloat(result.Data[i].Profit.replace(",", ".")) + '</td>' +
                    '<td>' +  parseFloat(result.Data[i].ProfitMargin.replace(",", ".")) + '</td>' +
                    '<td>' +  parseFloat(result.Data[i].Time.replace(",", ".")) + '</td>' +
                    '</tr>';
            }
$("#details").empty().append(data);

I’m replacing "," with "." for sum as double.Value always come with "x.xx" I read many topics watched many videos but cant figure it out. Any help?

var table = $("#details");
var totalIncome = 0, // etc for the others
    $(table).find('td').not(":first").each(function () {
        totalIncome += parseFloat(this.val());
    })

I want to sum all columns except popname which is first column

>Solution :

Just sum your columns as you go through and then set the text of the relevant total cell:

const result = {
  Data: [{
      Popname: "Row1",
      Income: "1,00",
      Expense: "2,00",
      Profit: "3,00",
      ProfitMargin: "4,00",
      Time: "5,00"
    },
    {
      Popname: "Row2",
      Income: "6,00",
      Expense: "7,00",
      Profit: "8,00",
      ProfitMargin: "9,00",
      Time: "10,00"
    },
  ]
}

let data = "";
let tIncome = 0;
let tExpense = 0;
let tProfit = 0;
let tProfitMargin = 0;
let tTime = 0;

for (var i = 0; i < result.Data.length; i++) {
  const income = parseFloat(result.Data[i].Income.replace(",", "."));
  const expense = parseFloat(result.Data[i].Expense.replace(",", "."));
  const profit = parseFloat(result.Data[i].Profit.replace(",", "."));
  const profitMargin = parseFloat(result.Data[i].ProfitMargin.replace(",", "."));
  const time = parseFloat(result.Data[i].Time.replace(",", "."));
  data += '<tr>' +
    '<td> ' + result.Data[i].Popname + '</td>' +
    '<td> ' + income + '</td>' +
    '<td>' + expense + '</td>' +
    '<td>' + profit + '</td>' +
    '<td>' + profitMargin + '</td>' +
    '<td>' + time + '</td>' +
    '</tr>';
    
   tIncome +=income;
   tExpense += expense;
   tProfit += profit
   tProfitMargin += profitMargin
   tTime += time;
}
$("#details").empty().append(data);

$("#totalofIncome").text(tIncome);
$("#totalofExpense").text(tExpense);
$("#totalofMargin").text(tProfit);
$("#totalofMarginProfit").text(tProfitMargin);
$("#totalofTime").text(tTime);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="TableDetails">
  <table id="detailTable" style="width:100%">
    <thead>
      <tr>
        <th>Popname</th>
        <th>Expense</th>
        <th>Income</th>
        <th>Margin</th>
        <th>Margin Profit</th>
        <th>Time</th>
      </tr>
    </thead>
    <tbody id="details">
    </tbody>
    <tfoot id="totalValues">
      <tr>
        <th>Total: </th>
        <th id="totalofIncome"></th>
        <th id="totalofExpense"></th>
        <th id="totalofMargin"></th>
        <th id="totalofMarginProfit"></th>
        <th id="totalofTime"></th>
      </tr>
    </tfoot>
  </table>
</div>

Leave a ReplyCancel reply