Modo listagem | Modo Linear

Bruno Bernardino

Ok.

Na realidade nem precisavas de jQuery, mas é bom aprender porque é uma framework muito poderosa.

A minha sugestão tem 2 coisas simples (que podiam estar no mesmo ficheiro): o ficheiro onde mostras os dados (HTML + JavaScript/jQuery) e o ficheiro onde tens os dados (JavaScript/JSON)

Basicamente o código HTML seria algo como isto (página completa, adapta às tuas necessidades)

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt" dir="ltr">

<head>

<title>Teste</title>

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<meta http-equiv="Content-Language" content="pt_PT" />

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript" src="data.js"></script>

<script type="text/javascript">

google.load("jquery", "1");

</script>

<script type="text/javascript">

$(document).ready(function() {

    if (typeof(tableData) != "undefined") {

        limit = tableData.linhas.length;

        for (i=0;i<limit;i++) {

            xHtml = $('#tableShowData').html();

            xHtml += "<tr>\n";

            xHtml += "<td>" + tableData.linhas[i].c1 + "</td>\n";

            xHtml += "<td>" + tableData.linhas[i].c2 + "</td>\n";

            xHtml += "<td>" + tableData.linhas[i].c3 + "</td>\n";

            xHtml += "</tr>\n";

            $('#tableShowData').html(xHtml);

        }

    }

});

</script>

<style type="text/css">

#tableShowData {

    border: 1px solid #CCCCCC;

    border-collapse: separate;

    padding: 0;

    margin: 0 auto;

    min-width: 200px;

}

#tableShowData tr td {

    border: 1px solid #CCCCCC;

    border-collapse: separate;

    padding: 5px;

    margin: 5px;

    min-width: 20px;

}

</style>

</head>

<body>

<table id="tableShowData">

</table>

</body>

</html>

O ficheiro data.js tem os dados em formato JSON:

Código:

var tableData = {

    "linhas" : [

        {

            "c1" : "Valor da Linha 1, Coluna 1",

            "c2" : "Valor da Linha 1, Coluna 2",

            "c3" : "Valor da Linha 1, Coluna 3"

        },

        {

            "c1" : "Valor da Linha 2, Coluna 1",

            "c2" : "Valor da Linha 2, Coluna 2",

            "c3" : "Valor da Linha 2, Coluna 3"

        },

        {

            "c1" : "Valor da Linha 3, Coluna 1",

            "c2" : "Valor da Linha 3, Coluna 2",

            "c3" : "Valor da Linha 3, Coluna 3"

        }

    ]

}

O resultado disso acima é uma tabela que é preenchida com os dados em data.js (nota que o html da tabela é apenas o elemento vazio).

Pega no código, altera-o, brinca com ele, e se tiveres alguma dúvida, respondo quando puder.

Edit: Esqueci-me de dizer, mas com este código, para mostrares mais dados basta apenas adicionar "uma" linha nova no objecto tableData, da mesma forma que estão os outros lá, ou seja, não precisas de mexer no html.