Tabela Dinamica!

babaloricha · Agosto 10, 2007

Bom galera to tentando fazer um script que monta uma celula da tabela pra cada "quarto", e qua quando a pessoa pssar o mouse por cimada celula tem que apareceer as propriedades do quarto. mas estou enfrentando uns probleminhas, com a passagem de parametros. rodem isso ai:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:1;
    left: 523px;
    top: 318px;
}
-->
</style>
</head>

<body>
<script language="javascript">
var listaquarto= new Array();
function quarto(n,o,cli){
    this.numero=n
    this.ocup=o;
    this.cliente=cli
    }
listaquarto[0]=new quarto(1,0,"rui");// simulacao dos dados do banco
listaquarto[1]=new quarto(2,0,"maria");
listaquarto[2]=new quarto(3,0,"jose");
listaquarto[3]=new quarto(4,1,"nalva");// quarto ocupado
listaquarto[4]=new quarto(5,0,"joao");
listaquarto[5]=new quarto(6,0,"thiago");
listaquarto[6]=new quarto(7,0,"matos");
listaquarto[7]=new quarto(8,1,"carol");// quero ocupado
listaquarto[8]=new quarto(9,0,"roberta");
listaquarto[9]=new quarto(10,0,"jeferson");
listaquarto[10]=new quarto(11,1,"luana");
listaquarto[11]=new quarto(12,0,"cesar");
total=listaquarto.length -1;
document.writeln("<table border=1 align='center'><tr>");
while(total!=0){
    document.writeln("<tr>");
    for(var j=0;j<listaquarto.length/2;j++,total--){
        if(total<0)
            alert("paro paro paro");
        if(listaquarto[total].ocup==0)
            document.writeln("<td onmouseover='statusvaga("+listaquarto[total]+");' width=30 align='center' bgcolor='#00ff00'>"+listaquarto[total].numero+"</td>");
        else document.writeln("<td width=30 align='center' bgcolor='red'>"+listaquarto[total].numero+"</td>");
    }
    document.writeln("</tr>");
}
document.writeln("</tr></table>");

function statusvaga(quarto){
    tabela=getElementById("tab");
    tabela.rows[0].cells[1].textContent=quarto.cliente;
}
</script>
<table>
<tr>
<td onmouseover="alert('a');" onmouseout="alert('b');">
opaaaa</td>
</tr>
<div id="Layer1">
<table id="tab">
    <tr>
    <td>cliente:</td><td></td>
    </tr>
</table>
</div>
</body>
</html>

se algum souber o que acontece eu aradeco muito! :P

Mestre SAM · Agosto 11, 2007

opa,

sua passagem de parametros não esta funcionando por falta de aspas.

veja:

document.writeln("<td onmouseover=\"statusvaga('"+listaquarto[total]+"');\" width=30 align='center' bgcolor='#00ff00'>"+listaquarto[total].numero+"</td>");

agora ele vai chamar o metodo e passar seu objeto. pode colocar um alert dentro do metodo para verificar. ah, e pra testar o seu codigo aqui, eu fiz umas alteracoes, testes no IE.

statusvaga('"+listaquarto[total]+"');

alterei para:

statusvaga('"+listaquarto[total].cliente+"');

e o seu metodo:

function statusvaga(quarto){
    tabela=getElementById("tab");
    tabela.rows[0].cells[1].textContent=quarto.cliente;
}

alterei para

function statusvaga(cel) {
    tabela = document.getElementById("tab");
    tabela.rows[0].cells[1].innerHTML = cel;
}

porque havia duplicidade de nome de variavel (quarto) no codigo.

e aquele elemento textContent nunca ouvi falar, e não existe na biblia do javascript, e usando innerHTML funcionou de boa para escrever dentro do elemento celula.

era isso, sucesso ai,

t+

flavio · Agosto 11, 2007

Minha resposta é um pouco diferente.

Primeiro:

Quando for criar Arrays informe o tamanho desejado.

var listaquarto= new Array(12);

Segundo: Na função quarto ficaram faltando alguns "ponto-e-virgula" ( ; ) Terceiro: No loop while foi colocado TR dentro de TR. E pra piorar, tem loops aninhados. O que fiz foi ajeitar as tags e reduzir pra 1 loop.

total=listaquarto.length-1;
document.writeln("<table border=1 align='center'><tr>");

while(total>=0){
    if(listaquarto[total].ocup == 0)
        document.writeln("<td width=30 align='center' bgcolor='#00ff00'>"+listaquarto[total].numero+"</td>");
    else
        document.writeln("<td onmouseover=\"statusvaga(listaquarto[" + total + "]);\" width=30 align='center' bgcolor='red'>"+listaquarto[total].numero+"</td>");
    total--;
}
document.writeln("</tr></table>");

e aquele elemento textContent nunca ouvi falar, e não existe na biblia do javascript, e usando innerHTML funcionou de boa para escrever dentro do elemento celula.

Pra se pegar o conteudo de uma célula você pode usar innerHTML (interpreta tags) ou innerText(não interpreta tags), que são o padrão. Mas o Opera não aceita o innerText, sendo necessário substituir por textContent(não interpreta tags).

Mestre SAM · Agosto 11, 2007

Pra se pegar o conteudo de uma célula você pode usar innerHTML ou innerText, que são o padrão. Mas o Opera não aceita o innerText, sendo necessário substituir por textContent.

bom, como você mesmo escreveu innerHTML é o padrão.

o textContent eu testei aqui no meu IE6 e não funfou.

flavio · Agosto 11, 2007

pois é, é só pra o Opera!

babaloricha · Agosto 13, 2007

Opa e ai!

pois é, é só pra o Opera!

no fire fox também funciona! :lol:

mas já que o innerHTML funciona no ie e no ff melhor ainda!

Os lops a aninhados são propositais preciso de uma tabela com varias linhas!

pretendo fazer um script legal posicionamento! esse script vai fazer parte do meu tcc caso eu termine e claro!

Mas mesmo se não terminar vai ter agradecimentos para o pessoal aqui do forum :lol:

eu corrigi de acordo com oque vocês postaram mas mesmo assim quando tento passar um objeto" listaquarto" não cosnigo acessar as propriedades!

mas se eu passar a priedade "listaquarto.numero" ai vai! tem alguma manha especial pra passar objeto e acessar as propriedadades dentro da função?

há e tem outra porque o layer não fica na posicao que eu botei? sera por causa do document.writeln?

Editado Agosto 13, 2007 por babaloricha

Mestre SAM · Agosto 13, 2007

então cara,

quando tu passa o objeto listaquarto por parametro, a assinatura do metodo não reconhece o tipo da variavel e interpreta como Object[].

então se você tentar ler obj.cliente, não vai rolar mesmo.

só se existisse uma forma de informar ao objeto o tipo dele depois que chega ao metodo.

((quarto)obj).cliente por exemplo.

mas isso não rola em js.

o que tu pode fazer, é passar os atributos separadamente na assinatura do metodo.

ou então, melhor, passar só o indice do array onde se encontra o objeto.

ao invés de:
statusvaga(listaquarto[" + total + "]);

passar:
statusvaga(total);

e ai no metodo recupera a linha do array pelo indice.

function statusvaga(linha) {
    tabela = document.getElementById("tab");
    tabela.rows[0].cells[1].innerHTML = listaquarto[linha].cliente;
}

e o problema do layer é isso mesmo, é por causa do document.write...

experimenta colocar o seu codigo html que contem a div antes do script que contem o document.write.

sucesso ai,

flavio · Agosto 13, 2007

ôxe, do meu jeito não deu certo? Apareceu algum aviso de erro?

babaloricha · Agosto 14, 2007

Funciono, mas como eu tinha dito antes eu não consigo acessar as priedadees do objeto!

vo te que fazer do jeito que o mestre sam falou! parametro por parametro :o

é rapaziada no JS nem tudo são flores!

mas obrigado pela ajuda!

Entrar

Tabela Dinamica!

Pergunta

babaloricha

Link para o comentário

Compartilhar em outros sites

8 respostass a esta questão

Posts Recomendados

Mestre SAM

Link para o comentário

Compartilhar em outros sites

flavio

Link para o comentário

Compartilhar em outros sites

Mestre SAM

Link para o comentário

Compartilhar em outros sites

flavio

Link para o comentário

Compartilhar em outros sites

babaloricha

Link para o comentário

Compartilhar em outros sites

Mestre SAM

Link para o comentário

Compartilhar em outros sites

flavio

Link para o comentário

Compartilhar em outros sites

babaloricha

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades