Modo listagem | Modo Linear

avlisrotiv

Pois, já "complicado", para mim, é isso mesmo, aprender agora... Neutral

Não posso aprender agora, ou qualquer coisa do género, eu queria fazer isto em HTML, como escrevi no tópico. Se der isso ou parecido (em HTML), tudo bem, se não, pronto, arranjo outra maneira.

Bruno Bernardino · 14-06-2010, 20:27

Bem, se quiseres esperar, amanhã de manhã ou de tarde pode ser que consiga montar aqui um exemplo rapidamente.

avlisrotiv · 14-06-2010, 20:30

Sim, claro Bruno, agradecia imenso. Wink

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.

avlisrotiv · 15-06-2010, 18:10

Exactamente isto! Agradeço-te imenso Bruno!
É que... "Épá", foi mesmo ali, no ponto certo! Mr Green

Tiras-me só uma pequena duvida?
Como coloco uma hiperligação ou uma imagem no ficheiro .JS de forma a funcionar? Experimentei HTML mas não funcionou, óbvio...
Eu sei é parvo, só vi depois de cometer este erro parvo... Tongue

(O quanto eu invejo-te... Shy

)

Bruno Bernardino · 16-06-2010, 10:39

Ora bem, podes colocar html, mas tens de "escapar" as aspas (colocar uma \ antes) para não dar erro, ex. (numa das linhas do data.js):

Código:

"c3" : "Valor da Linha 3, Coluna 3 <img src=\"http://fuzzythoughts.files.wordpress.com/2008/01/scarlettjohansson.jpg\" border=\"0\" />"

Mas, se pretendes utilizar html só para imagens e links, podias fazer uma coisa mais interessante, que seria definir o tipo de dados (type = img, link ou text) e depois ao escrever na tabela, adicionavas o html, isto para evitar passar dados que não "texto" no JavaScript, pois se quiseres ir buscar esses dados a outro ficheiro no futuro (ajax, por exemplo, a uma base de dados), não é uma boa prática passar código html.