Как добавить строку в каждые 3 строки в таблице javascript

Question

Я создаю таблицу с распечатанными данными из базы данных следующим образом:

здесь JS и HTML.

JS

function initDataTableSaldoRek1() {
    showLoadingCss()
     $.ajax({
            url: baseUrl + "api_dashboard/get_ivest",
            dataType: 'JSON',
            type: "GET",
            success: function (res) {
                var data = res.return;
                $("#date").html(data[0].TANGGAL);
                $('#table-invest tbody').empty();
                $.each(data, function (key, val) {
                    var html = "<tr>" +
                        "<td>" + val.DATE + "</td>" +
                        "<td>" + val.TYPE + "</td>" +
                        "<td align='right'>" + accounting.formatNumber(val.USD,2,".",",") + "</td>" +
                        "<td align='right' >" + accounting.formatNumber(val.EUR,2,".",",") + "</td>" +
                        "</tr>";
                    $('#table-invest tbody').append(html);
                });
        hideLoadingCss()
        },
          });
}

HTML

<div class="view-table" >
    <table id="table-invest" class="table table-bordered">
        <thead>
        <tr>
            <th style="background-color: #67a2d8" width="12.5%">DATE</th>
            <th style="background: #67a2d8" width="12.5%">TYPE OF PAYMENT</th>
            <th style="background: #67a2d8" width="12.5%">EUR</th>
            <th style="background: #67a2d8" width="12.5%">USD</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

и я хочу добавить строку каждые 3 строки, которые суммируют столбцы 2 и 3, как показано ниже .

У всех здесь есть опыт создания таблицы, как показано ниже, в JavaScript?

Спасибо ..

Answer 1

Просто проверьте каждую третью строку, поскольку обратный вызов $ .each предоставляет значение индекса.

function initDataTableSaldoRek1() {
    showLoadingCss()
     $.ajax({
            url: baseUrl + "api_dashboard/get_ivest",
            dataType: 'JSON',
            type: "GET",
            success: function (res) {
                var data = res.return;
                $("#date").html(data[0].TANGGAL);
                let html = "<tr>" +
                    "<td>" + val.DATE + "</td>" +
                    "<td>" + val.TYPE + "</td>" +
                    "<td align='right'>" + accounting.formatNumber(val.USD, 2, ".", ",") + "</td>" +
                    "<td align='right' >" + accounting.formatNumber(val.EUR, 2, ".", ",") + "</td>" +
                    "</tr>";
                $('#table-invest tbody').append(html);
                $('#table-invest tbody').empty();
                $.each(data, function (key, val) {
                    if ((key+1) % 3 === 0 ){
                        html = `<tr><td>TOTAL</td></tr> ${html}`;
                    }else{
                        return html;
                    }
                });
        hideLoadingCss()
        },
    });
}

Answer 2

Вы можете просто использовать счетчик, когда этот счетчик достигнет нужного вам количества строк, добавьте «итоговую» строку и сбросьте счетчик.

Кроме того, следите за общим значением (я не не знаю, какую сумму вы хотите вычислить, так что это ваша часть), внутри if, чтобы проверить счетчик, сбросьте эту сумму тоже.

Примерно так:

let counter = 0;
let sumTotal = 0;
$.each(data, function(key, val) {
  var html = "<tr>" +
    "<td>" + val.DATE + "</td>" +
    "<td>" + val.TYPE + "</td>" +
    "<td align='right'>" + accounting.formatNumber(val.USD, 2, ".", ",") + "</td>" +
    "<td align='right' >" + accounting.formatNumber(val.EUR, 2, ".", ",") + "</td>" +
    "</tr>";
    sumTotal = 0;//USE YOUR LOGIC TO CALCULATE AND INCREASE TOTAL
  $('#table-invest tbody').append(html);
  counter++;

  //check if it is the moment to add the new row total
  if (counter == 3){
    let newRow = "<tr>" +
      "<td>Total: " + sumTotal + "</td>" +
    "</tr>";
    $('#table-invest tbody').append(newRow);
    counter = 0;
    sumTotal = 0;
  }
});