Generate HTML elements via Javascript

Question

I need to create a code that after passing some parameters it generates a graph similar to the image below, I thought of creating a table for each activity. Does anyone have any tips, or do you know an article that could help me? I think about using Json to pass the data (I know how to work with Json), my problem would be creating this Function in Javascript

This table is defined by dependencies, as we see in the image the activity B is dependent on the activity To

My Json will have a structure similar to the one below:

<script>
$(document).ready(function () {

    $.ajax({
        type: "GET",
        url: "/Venda/GetDadosItensVenda",
        success: function (itensVenda) {

            if (itensVenda != null) {

                $('#tbody').children().remove();

                $(itensVenda).each(function (i) {

                    var tbody = $('#tbody');
                    var tr = "<tr>";
                    tr +=
                    tr += "<td>" + itensVenda[i].CodigoProduto;
                    tr += "<td>" + itensVenda[i].Quantidade;
                    tr += "<td>" + itensVenda[i].PrecoUnitario;
                    tr += "<td>" + "<button class='btn btn-info' onclick=Editar(" + itensVenda[i].Id + ")>" + "Editar";
                    tr += "<td>" + "<button class='btn btn-danger' onclick=Deletar(" + itensVenda[i].Id + ")>" + "Deletar";

                    tbody.append(tr);

                });
            }
        }
    });
});

`

Answer 1

JC, in your example you are forgetting to close the tags, in any case I would use a template to build the HTML.

Here’s an example with Handlebars.

$(function () {

  var source = $("#tmpl-registros").html();
  var template = Handlebars.compile(source);
  var tabela = $('#tbody');
  
  $.ajax({
    type: "GET",
    url: "/Venda/GetDadosItensVenda",
    success: function (itensVenda) {
      if (itensVenda != null) {
        var html = template(itensVenda);
        tabela.html(html);
      }
    },
    error: function () {
      var itensVenda = [];
      for (var indice = 1; indice <= 20; indice++) {
        itensVenda.push({
          Id: indice, 
          CodigoProduto: indice, 
          Quantidade: indice, 
          PrecoUnitario: 1.23 * indice
        });
      }

      var html = template(itensVenda);
      tabela.html(html);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>

<table>
  <thead>
    <tr>
      <th>CodigoProduto</th>
      <th>Quantidade</th>
      <th>PrecoUnitario</th>
      <th>Editar</th>
      <th>Deletar</th>
    </tr>
  </thead>
  <tbody id="tbody">
  </tbody>
</table>

<script id="tmpl-registros" type="text/x-handlebars-template">
  {{#each this}}
  <tr>
    <td>{{CodigoProduto}}</td>
    <td>{{Quantidade}}</td>
    <td>{{PrecoUnitario}}</td>
    <td><button class='btn btn-info' onclick=Editar({{Id}})>Editar</button></td>
    <td><button class='btn btn-danger' onclick=Deletar({{Id}})>Deletar</button></td>
  </tr>
  {{/each}}
</script>

Answer 2

Try this:

<script>
function sua_funcao(parametroA) {
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("tabela").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","cria_tabela.php?parametro="+parametroA,true);
            xmlhttp.send();
}
</script>

This code goes in the head of your page, it takes an isolated page "cria_table.php" and feeds the item "table" in your code with the result of this page, so you can continue to program PHP with few lines of Javascript.

This is the item to be fed:

<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12" id="tabela" >
</div>

And in the cria_tabela would have your tables created in PHP.

If you don’t already know, I recommend a search in bootstrap, for better appearance of the page.