Apresentar conteudo em um tabela a partir de uma "base de dados".

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>

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"

        }

    ]

}