Dev Faq
4
votes

Comment créer un en-tête HTML dynamique

Je crée une table HTML dynamique qui a col-span à l'intérieur, le problème est que je ne peux pas créer ces en-têtes de col-span dynamiquement. Voici mon json

json 

[{
    "billdate": "2018-09-01",
    "outlet": "JAYANAGAR",

    "discount": 513,
    "GST": 25357,
    "amount": 476426
  },
  {
    "billdate": "2018-09-01",
    "outlet": "MALLESHWARAM",

    "discount": 0,
    "GST": 4930,
    "amount": 92141
  },
  {
    "billdate": "2018-09-01",
    "outlet": "KOLAR",

    "discount": 0,
    "GST": 5966,
    "amount": 115313
  },
  {
    "billdate": "2018-09-02",
    "outlet": "JAYANAGAR",

    "discount": 471,
    "GST": 28319,
    "amount": 511153
  },
  {
    "billdate": "2018-09-02",
    "outlet": "MALLESHWARAM",
           "discount": 0,
    "GST": 6198,
    "amount": 115704
  },
  {
    "billdate": "2018-09-02",
    "outlet": "KOLAR",

    "discount": 0,
    "GST": 4254,
    "amount": 83597
  },
  {
    "billdate": "2018-09-03",
    "outlet": "JAYANAGAR",

    "discount": 263,
    "GST": 9944,
    "amount": 167421
  },
  {
    "billdate": "2018-09-03",
    "outlet": "KOLAR",

    "discount": 0,
    "GST": 2693,
    "amount": 53775
  }
]

billdate et outlet sont l'en-tête parent à l'intérieur des points de vente , c'est-à-dire Jayanagar , malleshwaram et kolar ici, j'ai d'autres valeurs d'objet, c'est-à-dire brut , réduction , GST et montant

  • Les quatre brut , remise , GST et montant sont comme col-span que je crée statiquement comme innerHTML=gross
  • Je souhaite les créer de manière dynamique et ne pas comprendre comment y parvenir 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div align="left" class="table table-responsive" id="commonDvScroll">
  <table id="dailySales"></table>
</div>
var data = [{
    "billdate": "2018-09-01",
    "outlet": "JAYANAGAR",
    "gross": 451458,
    "discount": 513,
    "GST": 25357,
    "amount": 476426
  },
  {
    "billdate": "2018-09-01",
    "outlet": "MALLESHWARAM",
    "gross": 87190,
    "discount": 0,
    "GST": 4930,
    "amount": 92141
  },
  {
    "billdate": "2018-09-01",
    "outlet": "KOLAR",
    "gross": 109308,
    "discount": 0,
    "GST": 5966,
    "amount": 115313
  },
  {
    "billdate": "2018-09-02",
    "outlet": "JAYANAGAR",
    "gross": 483194,
    "discount": 471,
    "GST": 28319,
    "amount": 511153
  },
  {
    "billdate": "2018-09-02",
    "outlet": "MALLESHWARAM",
    "gross": 109483,
    "discount": 0,
    "GST": 6198,
    "amount": 115704
  },
  {
    "billdate": "2018-09-02",
    "outlet": "KOLAR",
    "gross": 79305,
    "discount": 0,
    "GST": 4254,
    "amount": 83597
  },
  {
    "billdate": "2018-09-03",
    "outlet": "JAYANAGAR",
    "gross": 157660,
    "discount": 263,
    "GST": 9944,
    "amount": 167421
  },
  {
    "billdate": "2018-09-03",
    "outlet": "KOLAR",
    "gross": 51059,
    "discount": 0,
    "GST": 2693,
    "amount": 53775
  }
]
let formatData = function(data) {
  let billdates = [];
  let outlets = [];
  data.forEach(element => {
    if (billdates.indexOf(element.billdate) == -1) {
      billdates.push(element.billdate);
    }
    if (outlets.indexOf(element.outlet) == -1) {
      outlets.push(element.outlet);
    }
  });
  return {
    data: data,
    billdates: billdates,
    outlets: outlets,

  };
};

let renderTable = function(data) {
  billdates = data.billdates;
  outlets = data.outlets;
  data = data.data;
  let tbl = document.getElementById("dailySales");
  let table = document.createElement("table");
  let thead = document.createElement("thead");
  let headerRow = document.createElement("tr");
  let th = document.createElement("th");
  th.innerHTML = "BillDate";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  let grandTotal = 0;
  let grandGross = 0;
  let grandDiscount = 0;
  let grandGst = 0;
  let outletWiseTotal = {};
  let outletWiseGross = {};
  let outletWiseDiscount = {};
  let outletWiseGst = {};
  th = document.createElement("th");
  th.colSpan = 4;
  th.innerHTML = "Total";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  outlets.forEach(element => {

    th = document.createElement("th");
    th.colSpan = 4;
    th.innerHTML = element;
    th.classList.add("text-center");
    headerRow.appendChild(th);

    outletWiseTotal[element] = 0;
    outletWiseGross[element] = 0;
    outletWiseDiscount[element] = 0;
    outletWiseGst[element] = 0;
    data.forEach(el => {
      if (el.outlet == element) {
        outletWiseTotal[element] += parseInt(el.amount);
        outletWiseGross[element] += parseInt(el.gross);
        outletWiseDiscount[element] += parseInt(el.discount);
        outletWiseGst[element] += parseInt(el.GST);
      }
    });
    grandTotal += outletWiseTotal[element]; //calculating totals for Total column
    grandGross += outletWiseGross[element];
    grandDiscount += outletWiseDiscount[element];
    grandGst += outletWiseGst[element];
  });

  thead.appendChild(headerRow);
  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "";
  headerRow.appendChild(th);

  for (i = 0; i < outlets.length + 1; i++) {
    th = document.createElement("th");
    th.innerHTML = "Discount"; //here statically i am giving the header names
    th.classList.add("text-center");
    th.classList.add("discount");
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "GST"; //here statically i am giving the header names
    th.classList.add("text-center");
    th.classList.add("gst");

    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "Net_Amount"; //here statically i am giving the header names
    th.classList.add("text-center");
    th.classList.add("netAmount");
    headerRow.appendChild(th);
    th = document.createElement("th");
    th.innerHTML = "Gross_Amount"; //here statically i am giving the header names
    th.classList.add("text-center");
    th.classList.add("grossAmount");
    headerRow.appendChild(th);
  }

  headerRow.insertBefore(th, headerRow.children[1]);
  thead.appendChild(headerRow);
  table.appendChild(thead);

  headerRow = document.createElement("tr");
  td = document.createElement("th");
  td.innerHTML = "Total";
  td.classList.add("text-center");
  headerRow.appendChild(td);

  outlets.forEach(element => { // these are the table rows for each column
    td = document.createElement("th");
    td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.appendChild(td);

    td = document.createElement("th");
    td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.appendChild(td);

    td = document.createElement("th");
    td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.appendChild(td);

    td = document.createElement("th");
    td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.appendChild(td);


  });
  td = document.createElement("th");
  td.innerHTML = grandTotal.toLocaleString('en-IN');
  td.classList.add("text-right");
  headerRow.insertBefore(td, headerRow.children[1]);

  td = document.createElement("th");
  td.innerHTML = grandGst.toLocaleString('en-IN');
  td.classList.add("text-right");
  headerRow.insertBefore(td, headerRow.children[1]);

  td = document.createElement("th");
  td.innerHTML = grandDiscount.toLocaleString('en-IN');
  td.classList.add("text-right");
  headerRow.insertBefore(td, headerRow.children[1]);

  td = document.createElement("th");
  td.innerHTML = grandGross.toLocaleString('en-IN');
  td.classList.add("text-right");
  headerRow.insertBefore(td, headerRow.children[1]);


  thead.appendChild(headerRow);
  table.appendChild(thead);

  let tbody = document.createElement("tbody");
  billdates.forEach(element => {
    let row = document.createElement("tr");
    td = document.createElement("td");
    td.innerHTML = element;
    row.appendChild(td);

    let total = 0;
    let totalGross = 0;
    let totalDiscount = 0;
    let totalGST = 0;
    outlets.forEach(outlet => {
      let ta = 0;
      let tg = 0;
      let tdi = 0;
      let tgst = 0;
      data.forEach(d => {
        if (d.billdate == element && d.outlet == outlet) {
          total += parseInt(d.amount);
          totalGross += parseInt(d.gross);
          totalDiscount += parseInt(d.discount);
          totalGST += parseInt(d.GST);
          ta = d.amount;
          tg = d.gross;
          tdi = d.discount;
          tgst = d.GST;
        }
      });

      td = document.createElement("td");
      td.innerHTML = tg.toLocaleString('en-IN');
      td.classList.add("text-right");
      row.appendChild(td);

      td = document.createElement("td");
      td.innerHTML = tdi.toLocaleString('en-IN');
      td.classList.add("text-right");
      row.appendChild(td);

      td = document.createElement("td");
      td.innerHTML = tgst.toLocaleString('en-IN');
      td.classList.add("text-right");
      row.appendChild(td);

      td = document.createElement("td");
      td.innerHTML = ta.toLocaleString('en-IN');
      td.classList.add("text-right");
      row.appendChild(td);




    });


    td = document.createElement("td");
    td.innerHTML = total.toLocaleString('en-IN');
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);

    td = document.createElement("td");
    td.innerHTML = totalGST.toLocaleString('en-IN');
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);

    td = document.createElement("td");
    td.innerHTML = totalDiscount.toLocaleString('en-IN');
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);



    td = document.createElement("td");
    td.innerHTML = totalGross.toLocaleString('en-IN');
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);


    tbody.appendChild(row);
  });

  table.appendChild(tbody);
  tbl.innerHTML = "";
  tbl.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
}
let formatedData = formatData(data);
renderTable(formatedData);
  • Selon les exigences brut , remise , GST et montant , tous ces éléments sont dynamiques, ils peuvent parfois être 3 2 et parfois 1 pour que j'essaye de créer dynamiquement
  • J'ai commenté les lignes de mon code où je les crée comme en-têtes

Edit

Ici, dans le JSON ci-dessous, je n'ai que réduction , gst et montant là n'est pas dégoûtant donc dans mon tableau, je ne veux que ces trois en-têtes comme col-span dans mon tableau

Comme la solution fournie par @Anilm ne semble pas faire comme ça 

[{
    "billdate": "2018-09-01",
    "outlet": "JAYANAGAR",
    "gross": 451458,
    "discount": 513,
    "GST": 25357,
    "amount": 476426
  },
  {
    "billdate": "2018-09-01",
    "outlet": "MALLESHWARAM",
    "gross": 87190,
    "discount": 0,
    "GST": 4930,
    "amount": 92141
  },
  {
    "billdate": "2018-09-01",
    "outlet": "KOLAR",
    "gross": 109308,
    "discount": 0,
    "GST": 5966,
    "amount": 115313
  },
  {
    "billdate": "2018-09-02",
    "outlet": "JAYANAGAR",
    "gross": 483194,
    "discount": 471,
    "GST": 28319,
    "amount": 511153
  },
  {
    "billdate": "2018-09-02",
    "outlet": "MALLESHWARAM",
    "gross": 109483,
    "discount": 0,
    "GST": 6198,
    "amount": 115704
  },
  {
    "billdate": "2018-09-02",
    "outlet": "KOLAR",
    "gross": 79305,
    "discount": 0,
    "GST": 4254,
    "amount": 83597
  },
  {
    "billdate": "2018-09-03",
    "outlet": "JAYANAGAR",
    "gross": 157660,
    "discount": 263,
    "GST": 9944,
    "amount": 167421
  },
  {
    "billdate": "2018-09-03",
    "outlet": "KOLAR",
    "gross": 51059,
    "discount": 0,
    "GST": 2693,
    "amount": 53775
  }
]

Dans mon JSON, tous les brut , Discount , Gst et Le montant y est alors ce sera affiché:

ceci sera affiché

Quand seulement Remise , GST et Amount sont là alors ce sera mis en dehors:

ce sera sorti

De même pour les autres également.

Ces quatre brut , remise , GST et montant sont dynamiques l'utilisateur sélectionne un, deux ou tous alors je veux remplir le tableau.

12 commentaires

Je ne comprends pas vraiment cette question. Pouvez-vous créer un JSFiddle avec le code et un exemple de HTML que vous aimeriez être le résultat de votre code? Cela identifierait le problème.

Si vous avez des cellules manquantes, laissez-les vides. Une table en a normalement un par colonne. Si une ligne a un ensemble complet de données et que la ligne suivante a une cellule manquante, expliquez comment cela est censé fonctionner.

@ zer00ne Les attributs colspan et rowspan sont assez courants, pour couvrir exactement cette exigence.

@LajosArpad J'ai déjà créé un extrait de code, et qu'est-ce que vous ne comprenez pas?

@manishthakur la question n'est pas bien formulée. Il faut le lire plusieurs fois pour comprendre quel est le problème exact. Je ne ferai pas ca. Si vous souhaitez avoir de meilleures chances d'obtenir de l'aide, vous devrez améliorer votre question. Je vous ai dit ce que vous devez faire. 1. Créez un JSFiddle qui reproduit le comportement dont vous parlez. J'ai vu l'extrait de code que vous avez donné, mais je ne créerai pas de violon pour vous. Tu devrais faire ça. 2. Donnez-nous un exemple de HTML qui devrait être le résultat de votre code. Cela expliquerait mieux le problème que vos paroles.

Ce n'est pas clair quand vous dites, "Selon l'exigence brute, remise, TPS et montant, tous ces éléments sont dynamiques, ils peuvent être 3 parfois 2 et parfois 1 pour que j'essaye de créer dynamiquement" . Ce n'est pas une bonne pratique de modifier les champs de lignes et de colspan pour tenir compte des données manquantes. L'absence de données peut être tout aussi importante que si elle était là. La suppression d'une colonne implique que les données de la colonne ne s'appliquent plus (si le lecteur remarque son absence).

@ zer00ne selon l'exigence, je veux dire ici je reçois brut, remise, TPS et montant , donc selon la sélection de l'utilisateur, il peut s'agir de remise, TPS et montant , mais la date de facturation et la prise vont être courantes

@ rv7 pour ce dont vous parlez? l'extrait que j'ai fourni qui fonctionne bien, le nouvel objet JSON que j'ai téléchargé ne fonctionne pas bien avec cela, j'ai téléchargé 2 photos ce que j'ai fait et ce que j'essaie de faire, à ce pour la boucle ligne Je définis statiquement les en-têtes de col-span selon les points de vente No +1 car comme vous pouvez le voir, ils sont communs dans chaque point de vente + une colonne, c'est-à-dire Total

OK je suis désolé. C'était un malentendu. Eh bien, il est très difficile de travailler avec votre mise en page spécifique. Pouvez-vous s'il vous plaît le réduire à un exemple minimal, complet et vérifiable.

@ rv7 J'ai presque terminé le codage, il suffit de faire cette boucle dans la tête et le corps qui montre ces quatre bruts, rabais, montant et TPS actuellement, je le fais quatre fois de manière statique parce que l'exigence initiale était que, maintenant l'utilisateur sélectionne les options et ils peuvent en sélectionner un ou plusieurs

Vous nous demandez de réécrire votre code pour qu'il soit générique. C'est presque comme une demande de fonctionnalité. Vous avez créé cette structure complexe en codant en dur presque toute la structure. Je peux seulement dire que la solution impliquera très probablement Object.keys et diverses méthodes de transformation de tableau.

@MaazSyedAdeeb non non je ne demande pas une solution complète comme vous pouvez le voir, j'ai créé une partie du code par une structure codée en dur et en tant que codeur de niveau modéré JS , je suis confronté à des problèmes pour le faire selon les besoins

3 Réponses :

1
votes

Essayez:

thisSpan = 4;

th.setAttribute ('colSpan', thisSpan);

3 commentaires

le colspan 4 que vous dites n'est pas fixe

Votre exemple de code utilise un nombre fixe, mais j'ai modifié ce qui précède pour utiliser une variable à la place.

hé je n'ai trouvé aucune solution avec ça, pouvez-vous les aider avec du code?

3
votes 

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="Utility.js"></script>
  </head>
  <body onLoad="createTable();">
    <div align="left" class="table table-responsive" id="commonDvScroll">
      <table id="dailySales"></table>
    </div>
</body>

</html>
//added createTable function >> is called on body on load
function createTable(){
    let formatedData = formatData(data);
    renderTable(formatedData);
}   

var data = [{
    "billdate": "2018-09-01",
    "outlet": "JAYANAGAR",
    "gross": 451458,
    "discount": 513,
    "GST": 25357,
    "amount": 476426
  },
  {
    "billdate": "2018-09-01",
    "outlet": "MALLESHWARAM",
    "gross": 87190,
    "discount": 0,
    "GST": 4930,
    "amount": 92141
  },
  {
    "billdate": "2018-09-01",
    "outlet": "KOLAR",
    "gross": 109308,
    "discount": 0,
    "GST": 5966,
    "amount": 115313
  },
  {
    "billdate": "2018-09-02",
    "outlet": "JAYANAGAR",
    "gross": 483194,
    "discount": 471,
    "GST": 28319,
    "amount": 511153
  },
  {
    "billdate": "2018-09-02",
    "outlet": "MALLESHWARAM",
    "gross": 109483,
    "discount": 0,
    "GST": 6198,
    "amount": 115704
  },
  {
    "billdate": "2018-09-02",
    "outlet": "KOLAR",
    "gross": 79305,
    "discount": 0,
    "GST": 4254,
    "amount": 83597
  },
  {
    "billdate": "2018-09-03",
    "outlet": "JAYANAGAR",
    "gross": 157660,
    "discount": 263,
    "GST": 9944,
    "amount": 167421
  },
  {
    "billdate": "2018-09-03",
    "outlet": "KOLAR",
    "gross": 51059,
    "discount": 0,
    "GST": 2693,
    "amount": 53775
  }
]
let formatData = function(data) {
  let billdates = [];
  let outlets = [];
  let arr=[];

  data.forEach(element => {
    if (billdates.indexOf(element.billdate) == -1) {
      billdates.push(element.billdate);

    }
    if (outlets.indexOf(element.outlet) == -1) {
      outlets.push(element.outlet);
      outlets.push();
        //checking for property of each object of array "data" and if property exists adding to custom_Obj >> then adding to array and returning.
      var jsonObj= {};
      if(element.hasOwnProperty("gross")){
             jsonObj["gross"]=element.gross;
      }
      if(element.hasOwnProperty("discount")){
          jsonObj["discount"]=element.discount;
      }
      if(element.hasOwnProperty("GST")){
         jsonObj["GST"]=element.GST;
      }
      if(element.hasOwnProperty("amount")){
             jsonObj["amount"]=element.amount;
      }
      arr.push(jsonObj);

    }

  });
  return {
    data: data,
    billdates: billdates,
    outlets: outlets,
    arr:arr

  };
}


let renderTable = function(data) {
  var arr=data.arr;
  billdates = data.billdates;
  outlets = data.outlets;

  data = data.data;



  let tbl = document.getElementById("dailySales");
  let table = document.createElement("table");
  let thead = document.createElement("thead");
  let headerRow = document.createElement("tr");
  let th = document.createElement("th");
  th.innerHTML = "BillDate";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  let grandTotal = 0;
  let grandGross = 0;
  let grandDiscount = 0;
  let grandGst = 0;
  let outletWiseTotal = {};
  let outletWiseGross = {};
  let outletWiseDiscount = {};
  let outletWiseGst = {};
  th = document.createElement("th");
  th.colSpan = 4;
  th.innerHTML = "Total";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  outlets.forEach(element => {

    th = document.createElement("th");
    th.colSpan = 4;
    th.innerHTML = element;
    th.classList.add("text-center");
    headerRow.appendChild(th);

    outletWiseTotal[element] = 0;
    outletWiseGross[element] = 0;
    outletWiseDiscount[element] = 0;
    outletWiseGst[element] = 0;
    data.forEach(el => {
      if (el.outlet == element) {
        outletWiseTotal[element] += parseInt(el.amount);
        outletWiseGross[element] += parseInt(el.gross);
        outletWiseDiscount[element] += parseInt(el.discount);
        outletWiseGst[element] += parseInt(el.GST);
      }
    });
    grandTotal += outletWiseTotal[element]; //calculating totals for Total column
    grandGross += outletWiseGross[element];
    grandDiscount += outletWiseDiscount[element];
    grandGst += outletWiseGst[element];
  });

  thead.appendChild(headerRow);
  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "";
  headerRow.appendChild(th);

 //As in this code you are creating "total" column  explicitly and not by json,So to create the header for the total column I am adding this headers to array[0] manually.
 //Otherwise header for that column cannot be populated dynamically.
 //Or you can add a dummy header obj in data array.
var totalcoloumn_obj={"gross":"","discount":"","GST":"","amount":""};
//as you showed total column in first, I am shifiting the array index by 1 and adding the total dymmy object at first index.
arr.unshift(totalcoloumn_obj);

//Creating column headers dynamically based on the data array that you declared on the top.


     for (var j = 0; j < arr.length; j++) {

         for(var key in arr[j]) {

             var th_dynamic = document.createElement("TH");
            var t = document.createTextNode(key);
            th_dynamic.appendChild(t);
            th_dynamic.classList.add("text-center");
             headerRow.appendChild(th_dynamic);

         }

        }




  headerRow.insertBefore(th, headerRow.children[1]);
  thead.appendChild(headerRow);
  table.appendChild(thead);

  headerRow = document.createElement("tr");
  td = document.createElement("th");
  td.innerHTML = "Total";
  td.classList.add("text-center");
  headerRow.appendChild(td);

  outlets.forEach(element => { // these are the table rows for each column
    td = document.createElement("th");
    td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.appendChild(td);

    td = document.createElement("th");
    td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.appendChild(td);

    td = document.createElement("th");
    td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.appendChild(td);

    td = document.createElement("th");
    td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.appendChild(td);


  });
  td = document.createElement("th");
  td.innerHTML = grandTotal.toLocaleString('en-IN');
  td.classList.add("text-right");
  headerRow.insertBefore(td, headerRow.children[1]);

  td = document.createElement("th");
  td.innerHTML = grandGst.toLocaleString('en-IN');
  td.classList.add("text-right");
  headerRow.insertBefore(td, headerRow.children[1]);

  td = document.createElement("th");
  td.innerHTML = grandDiscount.toLocaleString('en-IN');
  td.classList.add("text-right");
  headerRow.insertBefore(td, headerRow.children[1]);

  td = document.createElement("th");
  td.innerHTML = grandGross.toLocaleString('en-IN');
  td.classList.add("text-right");
  headerRow.insertBefore(td, headerRow.children[1]);


  thead.appendChild(headerRow);
  table.appendChild(thead);

  let tbody = document.createElement("tbody");
  billdates.forEach(element => {
    let row = document.createElement("tr");
    td = document.createElement("td");
    td.innerHTML = element;
    row.appendChild(td);

    let total = 0;
    let totalGross = 0;
    let totalDiscount = 0;
    let totalGST = 0;
    outlets.forEach(outlet => {
      let ta = 0;
      let tg = 0;
      let tdi = 0;
      let tgst = 0;
      data.forEach(d => {
        if (d.billdate == element && d.outlet == outlet) {
          total += parseInt(d.amount);
          totalGross += parseInt(d.gross);
          totalDiscount += parseInt(d.discount);
          totalGST += parseInt(d.GST);
          ta = d.amount;
          tg = d.gross;
          tdi = d.discount;
          tgst = d.GST;
        }
      });

      td = document.createElement("td");
      td.innerHTML = tg.toLocaleString('en-IN');
      td.classList.add("text-right");
      row.appendChild(td);

      td = document.createElement("td");
      td.innerHTML = tdi.toLocaleString('en-IN');
      td.classList.add("text-right");
      row.appendChild(td);

      td = document.createElement("td");
      td.innerHTML = tgst.toLocaleString('en-IN');
      td.classList.add("text-right");
      row.appendChild(td);

      td = document.createElement("td");
      td.innerHTML = ta.toLocaleString('en-IN');
      td.classList.add("text-right");
      row.appendChild(td);




    });


    td = document.createElement("td");
    td.innerHTML = total.toLocaleString('en-IN');
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);

    td = document.createElement("td");
    td.innerHTML = totalGST.toLocaleString('en-IN');
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);

    td = document.createElement("td");
    td.innerHTML = totalDiscount.toLocaleString('en-IN');
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);



    td = document.createElement("td");
    td.innerHTML = totalGross.toLocaleString('en-IN');
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);


    tbody.appendChild(row);
  });

  table.appendChild(tbody);
  tbl.innerHTML = "";
  tbl.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
}

4 commentaires

hé j'ai essayé votre solution, mais cela n'a pas fonctionné, veuillez vérifier avec le nouvel objet JSOn que j'ai fourni dans ma modification, car le nouvel objet n'a pas brut mais il montre toujours la colonne brute dans le tableau , mes données json seront dynamiques brut , remise , gst et montant sont parfois dynamiques, les 4 seront il y a parfois 2 ou 3 ou un

Dans l'extrait de code d'exécution, il fonctionne comme prévu selon votre question précédente.Je ne suis pas en mesure de comprendre le problème exact pour lequel vous voulez une solution.Veuillez fournir une image instantanée de votre table à quoi vous voulez qu'elle ressemble exactement.Ainsi, je peut modifier la solution en fonction de celle-ci.

ok j'ai compris, laissez-moi modifier le code et je posterai la solution

Avec le code existant, je trouve ça difficile, j'ai besoin d'écrire un nouveau code

3
votes

Essayez comme ça, j'ai modifié du code de réponse d'Anilm . J'espère que cela fonctionnera pour vous. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="Utility.js"></script>
  </head>
  <body onLoad="createTable();">
    <div align="left" class="table table-responsive" id="commonDvScroll">
      <table id="dailySales"></table>
    </div>
  </body>

</html>
//added createTable function >> is called on body on load
function createTable(){
    let formatedData = formatData(data);
    renderTable(formatedData);
}   
var hasGross    = false;;
var hasGST      = false;
var hasDiscount = false;
var hasTotal = false;



var data = [{
    "billdate": "2018-09-01",
    "outlet": "JAYANAGAR",
    "discount": 513,
    "gross": 25357,
    "amount": 476426
  },
  {
    "billdate": "2018-09-01",
    "outlet": "MALLESHWARAM",
    "discount": 0,
    "gross": 4930,
    "amount": 92141
  },
  {
    "billdate": "2018-09-01",
    "outlet": "KOLAR",
    "discount": 0,
    "gross": 5966,
    "amount": 115313
  },
  {
    "billdate": "2018-09-02",
    "outlet": "JAYANAGAR",
    "discount": 471,
    "gross": 28319,
    "amount": 511153
  },
  {
    "billdate": "2018-09-02",
    "outlet": "MALLESHWARAM",
    "discount": 0,
    "gross": 6198,
    "amount": 115704
  },
  {
    "billdate": "2018-09-02",
    "outlet": "KOLAR",
    "discount": 0,
    "gross": 4254,
    "amount": 83597
  },
  {
    "billdate": "2018-09-03",
    "outlet": "JAYANAGAR",
    "discount": 263,
    "gross": 9944,
    "amount": 167421
  },
  {
    "billdate": "2018-09-03",
    "outlet": "KOLAR",
    "discount": 0,
    "gross": 2693,
    "amount": 53775
  }
]
let formatData = function(data) {
  let billdates = [];
  let outlets = [];
  let arr=[];

  data.forEach(element => {
    if (billdates.indexOf(element.billdate) == -1) {
      billdates.push(element.billdate);

    }
    if (outlets.indexOf(element.outlet) == -1) {
      outlets.push(element.outlet);
      outlets.push();
        //checking for property of each object of array "data" and if property exists adding to custom_Obj >> then adding to array and returning.
          var jsonObj= {};
      if(element.hasOwnProperty("gross")){
          hasGross = true;
             jsonObj["gross"]=element.gross;
     }
      if(element.hasOwnProperty("discount")){
          hasDiscount = true;
          jsonObj["discount"]=element.discount;
     }
     if(element.hasOwnProperty("GST")){
         hasGST = true;
         jsonObj["GST"]=element.GST;
     }
      if(element.hasOwnProperty("amount")){
          hasTotal = true;
             jsonObj["amount"]=element.amount;
     }


        arr.push(jsonObj);

    }

  });
  return {
    data: data,
    billdates: billdates,
    outlets: outlets,
    arr:arr

  };
}


let renderTable = function(data) {
    var arr=data.arr;
  billdates = data.billdates;
  outlets = data.outlets;

  data = data.data;



  let tbl = document.getElementById("dailySales");
  let table = document.createElement("table");
  let thead = document.createElement("thead");
  let headerRow = document.createElement("tr");
  let th = document.createElement("th");
  th.innerHTML = "BillDate";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  let grandTotal = 0;
  let grandGross = 0;
  let grandDiscount = 0;
  let grandGst = 0;
  let outletWiseTotal = {};
  let outletWiseGross = {};
  let outletWiseDiscount = {};
  let outletWiseGst = {};
  th = document.createElement("th");
  let cols = 0;
  if(hasGST){
    cols++;
  }
  if(hasGross){
    cols++
  }
  if(hasDiscount){
    cols++
  }
  if(hasTotal){
    cols++
  }
  th.colSpan = cols;
  th.innerHTML = "Total";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  outlets.forEach(element => {

    th = document.createElement("th");
    th.colSpan = cols
    th.innerHTML = element;
    th.classList.add("text-center");
    headerRow.appendChild(th);

    outletWiseTotal[element] = 0;
    outletWiseGross[element] = 0;
    outletWiseDiscount[element] = 0;
    outletWiseGst[element] = 0;
    data.forEach(el => {
      if (el.outlet == element) {
        if(hasTotal){
            outletWiseTotal[element] += parseInt(el.amount);
        }
        if(hasGross){
          outletWiseGross[element] += parseInt(el.gross);
        }
        if(hasDiscount){
            outletWiseDiscount[element] += parseInt(el.discount);
        }
        if(hasGST){
            outletWiseGst[element] += parseInt(el.GST);
        }
      }
    });
    if(hasTotal){
        grandTotal += outletWiseTotal[element]; //calculating totals for Total column
    }
    if(hasGross){
      grandGross += outletWiseGross[element];
    }
    if(hasDiscount){
        grandDiscount += outletWiseDiscount[element];
    }
    if(hasGST){
        grandGst += outletWiseGst[element];
    }
  });

  thead.appendChild(headerRow);
  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "";
  headerRow.appendChild(th);

 //As in this code you are creating "total" column  explicitly and not by json,So to create the header for the total column I am adding this headers to array[0] manually.
 //Otherwise header for that column cannot be populated dynamically.
 //Or you can add a dummy header obj in data array.
var totalcoloumn_obj={};
if(hasGross){
    totalcoloumn_obj.gross = "";
}
if(hasDiscount){
    totalcoloumn_obj.discount = "";
}
if(hasGST){
    totalcoloumn_obj.GST = "";
}
if(hasTotal){
    totalcoloumn_obj.amount = "";
}
//as you showed total column in first, I am shifiting the array index by 1 and adding the total dymmy object at first index.
arr.unshift(totalcoloumn_obj);

//Creating column headers dynamically based on the data array that you declared on the top.


     for (var j = 0; j < arr.length; j++) {

         for(var key in arr[j]) {

             var th_dynamic = document.createElement("TH");
            var t = document.createTextNode(key);
            th_dynamic.appendChild(t);
            th_dynamic.classList.add("text-center");
             headerRow.appendChild(th_dynamic);

         }

        }




  headerRow.insertBefore(th, headerRow.children[1]);
  thead.appendChild(headerRow);
  table.appendChild(thead);

  headerRow = document.createElement("tr");
  td = document.createElement("th");
  td.innerHTML = "Total";
  td.classList.add("text-center");
  headerRow.appendChild(td);

  outlets.forEach(element => { // these are the table rows for each column

    if(hasGross){
        td = document.createElement("th");
        td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
        td.classList.add("text-right");
        headerRow.appendChild(td);
    }

    if(hasDiscount){
        td = document.createElement("th");
        td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
        td.classList.add("text-right");
        headerRow.appendChild(td);
    }

    if(hasGST){
        td = document.createElement("th");
        td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
        td.classList.add("text-right");
        headerRow.appendChild(td);
    }

    if(hasTotal){
        td = document.createElement("th");
        td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
        td.classList.add("text-right");
        headerRow.appendChild(td);
    }


  });
  if(hasTotal){
    td = document.createElement("th");
    td.innerHTML = grandTotal.toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.insertBefore(td, headerRow.children[1]);
  }

    if(hasGST){
        td = document.createElement("th");
        td.innerHTML = grandGst.toLocaleString('en-IN');
        td.classList.add("text-right");
        headerRow.insertBefore(td, headerRow.children[1]);
    }

  if(hasDiscount){
    td = document.createElement("th");
    td.innerHTML = grandDiscount.toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.insertBefore(td, headerRow.children[1]);
  }

  if(hasGross)
  {
      td = document.createElement("th");
      td.innerHTML = grandGross.toLocaleString('en-IN');
      td.classList.add("text-right");
      headerRow.insertBefore(td, headerRow.children[1]);
    }


  thead.appendChild(headerRow);
  table.appendChild(thead);

  let tbody = document.createElement("tbody");
  billdates.forEach(element => {
    let row = document.createElement("tr");
    td = document.createElement("td");
    td.innerHTML = element;
    row.appendChild(td);

    let total = 0;
    let totalGross = 0;
    let totalDiscount = 0;
    let totalGST = 0;
    outlets.forEach(outlet => {
      let ta = 0;
      let tg = 0;
      let tdi = 0;
      let tgst = 0;
      data.forEach(d => {
        if (d.billdate == element && d.outlet == outlet) {
          if(hasTotal){
            total += parseInt(d.amount);
            ta = d.amount;
          }
          if(hasDiscount){
            totalDiscount += parseInt(d.discount);
            tdi = d.discount;
          }
          if(hasGST){
            totalGST += parseInt(d.GST);
            tgst = d.GST;
          }

          if(hasGross){
            totalGross += parseInt(d.gross);
            tg = d.gross;
          }


        }
      });
        //console.log(tg)
      if(hasGross){
          td = document.createElement("td");
          td.innerHTML = tg.toLocaleString('en-IN');
          td.classList.add("text-right");
          row.appendChild(td);
      }

      if(hasDiscount){
        td = document.createElement("td");
        td.innerHTML = tdi.toLocaleString('en-IN');
        td.classList.add("text-right");
        row.appendChild(td);
      }

      if(hasGST){
        td = document.createElement("td");
        td.innerHTML = tgst.toLocaleString('en-IN');
        td.classList.add("text-right");
        row.appendChild(td);
      }

      if(hasTotal){
        td = document.createElement("td");
        td.innerHTML = ta.toLocaleString('en-IN');
        td.classList.add("text-right");
        row.appendChild(td);
      }




    });


    if(hasTotal){
        td = document.createElement("td");
        td.innerHTML = total.toLocaleString('en-IN');
        td.classList.add("text-right");
        row.insertBefore(td, row.children[1]);
    }

    if(hasGST){
        td = document.createElement("td");
        td.innerHTML = totalGST.toLocaleString('en-IN');
        td.classList.add("text-right");
        row.insertBefore(td, row.children[1]);
    }

    if(hasDiscount){
        td = document.createElement("td");
        td.innerHTML = totalDiscount.toLocaleString('en-IN');
        td.classList.add("text-right");
        row.insertBefore(td, row.children[1]);
    }


    if(hasGross){
        td = document.createElement("td");
        td.innerHTML = totalGross.toLocaleString('en-IN');
        td.classList.add("text-right");
        row.insertBefore(td, row.children[1]);
    }


    tbody.appendChild(row);
  });

  table.appendChild(tbody);
  tbl.innerHTML = "";
  tbl.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
}

4 commentaires

Hé monsieur, il a des problèmes 1:> lorsque j'utilise JSON qui a les quatre bruts , montant , remise et GST la dernière colonne de Kolar de la dernière ligne ne s'affiche pas comme cellule, elle est vide. 2:> lorsque l'utilisateur sélectionne brut , Amount et Gst alors il lance une erreur, je pense que vous ne l'avez fait que lorsqu'il y a pas de brut dans l'objet JSON qui est incorrect L'utilisateur peut sélectionner dynamiquement l'un d'entre eux

hey nom avez-vous vérifié la sortie, il montre autre chose kolar n'a qu'une seule colonne et jayanagar que 4 colonnes et Total n'a que 3 veuillez vérifier

même problème monsieur je vous ai dit que je pense que vous vérifiez avec seulement brut, maintenant j'ai brut dans mon json et je n'ai pas de réduction cela génère une erreur, de même l'un d'entre eux peut manquer ou deux peut être manquant

hé monsieur si pouvez-vous s'il vous plaît vérifier ce problème stackoverflow.com/questions/56422075/...

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO