Блог

Главная - Вопросы по программированию - Суммируйте все столбцы, кроме первого столбца

Суммируйте все столбцы, кроме первого столбца

#javascript #jquery

Вопрос:

Я пытаюсь суммировать все столбцы, кроме первого столбца. Мой HTML-код таков;

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

И я заполняю тело с помощью цикла for, как это в 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);

Я заменяю «,» на «.» для суммы как двойной.Значение всегда приходит с «x.xx» Я прочитал много тем, посмотрел много видео, но не могу понять это. Какая-нибудь помощь?

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

Я хочу суммировать все столбцы, кроме popname, который является первым столбцом

Комментарии:

1. В идентификаторе <th id=»totalExpense»> отсутствует закрывающая кавычка

2. this.val() используется для ввода — измените на this.text()

3. Для этого вам нужно взглянуть на свой код, у вас много ошибок типа <th> id="totalofMargin"</th> . И <th id="totalofExpense></th> отсутствует "

4. $(table).find('td').not(":first") даст вам все td s, кроме самого первого (т. е. вверху слева). Вы, наверное, хотите $(table).find('td').not(":first-child")

5. Почему вы даже пытаетесь прочитать эти данные из таблицы, чтобы подвести итог, почему вы не делаете это в том же месте, где вы уже просматриваете данные для создания таблицы?

Ответ №1:

Просто суммируйте свои столбцы по мере прохождения, а затем установите text соответствующую общую ячейку:

 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>
Метки: ,