Generate HTML elements via Javascript

Question

Generate HTML elements via Javascript

Navigation

#1 by (1 votes)
#2 by (-1 votes)

2

I need to create a code that after passing some parameters it generates a graphic 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 can help me? I think of using Json to pass the data (I know how to work with Json ), my problem would be to create this function in Javascript

Thistableisdefinedbydependencies,asweseeintheimagetheactivityBisdependentontheactivityA

MyJsonwillhaveastructuresimilartotheonebelow:

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

                });
            }
        }
    });
});

'

javascript jquery html5 json asp.net-mvc

asked by anonymous 17.10.2015 / 23:57

2 answers

Problem in jwplayer + chrome combination .NET Remote Debugging on Different Operating System

score 1 · Answer 1

JC, in your example you are forgetting to close the tags, in any case I would use a template to mount 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><scriptsrc="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>

score -1 · 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 on the head of your page, it takes an isolated page "create_tabela.php" and feeds the "table" item in your code with the result of this page, so you can continue to program PHP with a few lines of JavaScript .

This is the item to feed:

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

And in cria_tabela would have your tables created in PHP.

If you still do not know, I recommend giving a bootstrap search for a better page appearance.