How to add a row in every 3 rows in table javascript

Question

I create table with print out data from database like this:

here the JS and 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>

and i want add a row every 3 rows that sum column 2 & 3 as below.

Everybody in here have ever experience to create table as below before in JavaScript?

Thank you..

Answer 1

Just make a check on each third row, since the $.each callback provides an index value.

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

You can simply use a counter, when this counter reaches the amount of rows you want, add the "total" row and reset the counter.

Also, keep track of the total value (I don't know which total you want to calculate, so it is up to you this part), inside the if to check the counter, reset this total too.

Something like this:

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