Colocar Resposta 
 
Avaliação do Tópico:
  • 0 votos - 0 Média
  • 1
  • 2
  • 3
  • 4
  • 5
Apresentar conteudo em um tabela a partir de uma "base de dados".
14-06-2010, 18:47 (Esta mensagem foi modificada pela última vez a: 14-06-2010 18:48 por avlisrotiv.)
Mensagem: #11
RE: Apresentar conteudo em um tabela a partir de uma "base de dados".
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.
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
14-06-2010, 20:27
Mensagem: #12
RE: Apresentar conteudo em um tabela a partir de uma "base de dados".
Bem, se quiseres esperar, amanhã de manhã ou de tarde pode ser que consiga montar aqui um exemplo rapidamente.

BrunoBernardino.com
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
14-06-2010, 20:30
Mensagem: #13
RE: Apresentar conteudo em um tabela a partir de uma "base de dados".
Sim, claro Bruno, agradecia imenso. Wink
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
15-06-2010, 17:55 (Esta mensagem foi modificada pela última vez a: 15-06-2010 17:56 por Bruno Bernardino.)
Mensagem: #14
RE: Apresentar conteudo em um tabela a partir de uma "base de dados".
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.

BrunoBernardino.com
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
15-06-2010, 18:10
Mensagem: #15
RE: Apresentar conteudo em um tabela a partir de uma "base de dados".
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 )
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
16-06-2010, 10:39
Mensagem: #16
RE: Apresentar conteudo em um tabela a partir de uma "base de dados".
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.

BrunoBernardino.com
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
Colocar Resposta 


Saltar Fórum:


Utilizadores a ver este tópico: 1 Visitante(s)