View pivot table



  • I am creating a dynamic table that from the values of an object, but at the time of generating the table it does not appear. Follow the code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="batata.js"></script>
    </head>
    <body>
    <div id="tbldados"></div>
    </body>
    </html>

    var dados =[{
    "N1":" CONTROLE DE GESTÃO ORCAMENTARIA CONCESSÕES - INDICADORES / 2017 (MILHARES R$)",
    "N2":" ",
    "N3":"A1 - ATIVIDADE CORE",
    "ANO_ANTERIOR":1214363,
    "ANO_ATUAL":1335800,
    "VAR":121437,
    "JAN":2388000,
    "FEV":2268000,
    "MAR":1728000,
    "ABR":2424000,
    "MAI":1464000,
    "JUN":2124000,
    "JUL":1212000,
    "AGO":1356000,
    "SET":2400000,
    "OUT":1800000,
    "NOV":0,
    "DEZ":0,
    "TOTAL":456291000
    }]

    function createTable(obj){
    // Criar a table
    $('#tbldados').append('<table></table>'); // Adiciona a tabela ao body
    var table = $('#tbldados').children('table'); // Seleciona a tabela

    // Criar o head da table
    var thead =  "&lt;tr&gt;";
    for (coluna in obj[0]) {
        thead += "&lt;th&gt;" + coluna + "&lt;/th&gt;";
    }
    thead += "&lt;/tr&gt;";
    $("&lt;table&gt;").show();
    
    //Criar o body da table
    var tbody = "&lt;tr&gt;";
    obj.forEach(function(linha,) {
        for (item in linha) {
            tbody += "&lt;td&gt;" + linha[item] + "&lt;/td&gt;";
        }
        tbody += "&lt;/tr&gt;";
    })
    
    
    
    // Adiciona a tabela completa ao body
    

    }
    $(document).ready(function(){
    createTable(dados);
    });



  • Your code has errors and no code to form the table. And you should use .append after completing the ties. After the loops, use the .append concatenating loop results to insert the result in div.

    One of the mistakes is:

    $("<table>").show();
    

    The selector <table> is invalid. It should be $("table").show();. But .show() also has no function at all.

    See the corrected code:

    var dados =[{
        "N1":" CONTROLE DE GESTÃO ORCAMENTARIA CONCESSÕES - INDICADORES / 2017 (MILHARES R$)",
        "N2":" ",
        "N3":"A1 - ATIVIDADE CORE",
        "ANO_ANTERIOR":1214363,
        "ANO_ATUAL":1335800,
        "VAR":121437,
        "JAN":2388000,
        "FEV":2268000,
        "MAR":1728000,
        "ABR":2424000,
        "MAI":1464000,
        "JUN":2124000,
        "JUL":1212000,
        "AGO":1356000,
        "SET":2400000,
        "OUT":1800000,
        "NOV":0,
        "DEZ":0,
        "TOTAL":456291000
    }];
    

    function createTable(obj){
    // Criar a table
    $('#tbldados').append('<table></table>'); // Adiciona a tabela ao body
    var table = $('#tbldados').children('table'); // Seleciona a tabela

    // Criar o head da table
    var thead =  "&lt;tr&gt;";
    for (coluna in obj[0]) {
        thead += "&lt;th&gt;" + coluna + "&lt;/th&gt;";
    }
    thead += "&lt;/tr&gt;";
    
    //Criar o body da table
    var tbody = "&lt;tr&gt;";
    obj.forEach(function(linha,) {
        for (item in linha) {
            tbody += "&lt;td&gt;" + linha[item] + "&lt;/td&gt;";
        }
        tbody += "&lt;/tr&gt;";
    })
    
    // Adiciona a tabela completa ao body
    $("table").append(thead+tbody);
    

    }
    $(document).ready(function(){
    createTable(dados);
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="tbldados"></div>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2