Display dynamic table

Asked

Viewed 412 times

1

I am creating a dynamic table that from the values of an object, but when generating the table it is not shown. 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 =  "<tr>";
    for (coluna in obj[0]) {
        thead += "<th>" + coluna + "</th>";
    }
    thead += "</tr>";
    $("<table>").show();

    //Criar o body da table
    var tbody = "<tr>";
    obj.forEach(function(linha,) {
        for (item in linha) {
            tbody += "<td>" + linha[item] + "</td>";
        }
        tbody += "</tr>";
    })



    // Adiciona a tabela completa ao body
}
$(document).ready(function(){
    createTable(dados);
});
javascript jquery

  • Hello, I do not understand very well your problem, try to explain a little better

  • opa blz paulo and the next I have the "data" and I want to create a dynamic table with this data but it is not displaying my table in html I would like to know what is missing put $(Document). ready and all however not displaying the table

  • Does the header appear? The tbody you mount but not enough to adopt to the table.

  • nothing comes up ,I give append

1 answer

1

Your code has errors and no code to form the table. And you must use .append after completing the loops. After the loops, use the .append concatenating the results of the links to insert the result in the div.

One of the mistakes is:

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

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

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 =  "<tr>";
    for (coluna in obj[0]) {
        thead += "<th>" + coluna + "</th>";
    }
    thead += "</tr>";

    //Criar o body da table
    var tbody = "<tr>";
    obj.forEach(function(linha,) {
        for (item in linha) {
            tbody += "<td>" + linha[item] + "</td>";
        }
        tbody += "</tr>";
    })

    // 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>

  • thanks, I was just a little nervous on Friday but when I got home and I moved I ended up getting

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.