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

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>