Exibir e Esconder texto no onclick

Lucas B. - Executa · Novembro 19, 2010

Estou trabalhando numa página, e queria fazer o seguinte (vai ser complicado explicar):

Essa página, servirá para administrar sugestões recebidas.

Criei nela uma tabela, com os campos "Nome", "Texto", "Email", e "Ações".

Tudo funciona normalmente e está dentro do esperado, com exceção da coluna "Texto".

Nela, coloquei um comando para aparecerem somente os 80 primeiros caracteres do texto recebido.

E para mostrar o texto inteiro, tive a seguinte idéia:

Ao clicar no texto reduzido, o texto inteiro aparecesse, e vice-versa.

Acho que não consigo me expressar melhor, mas é basicamente fácil de se entender.

Grato desde já, Lucas.

Editado Novembro 25, 2010 por quintelab
Título alterado

Marcelo Santos · Novembro 20, 2010

Tenta isso aqui:

Página teste.php:

<html>
<head>
<title>Titulo do Site</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>

<body>
<?php
for($i = 0; $i<=10; $i++){
    $sugestao[$i]['nome'] = 'Nome '.$i;
    $sugestao[$i]['texto_completo'] = $i.'- ASDASDASDASDASDASDASDASDASDASDASDDDDDDDASDSSDDSDSDDSSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSD';
    $sugestao[$i]['texto_comprimido'] = substr($sugestao[$i]['texto_completo'], 0, 20)."...";
    $sugestao[$i]['email'] = 'teste'.$i.'@teste.com';
    $sugestao[$i]['acoes'] = '<a id="'.$i.'" href="#">Editar</a> | <a id="'.$i.'" href="#">Excluir</a> | ...';
}

echo "
<table border='1' id='tabela'>
<thead>
<th>Nome</th>
<th>Texto</th>
<th>Email</th>
<th>Ações</th>
</thead>
<tbody>
";

foreach($sugestao as $chave=>$linha){
    echo '
    <tr>
        <td>'.$linha['nome'].'</td>
        <td class="mouseOver" id="'.$chave.'">'.$linha['texto_comprimido'].'</td>
        <td>'.$linha['email'].'</td>
        <td>'.$linha['acoes'].'</td>
    </tr>
    ';
}
echo '
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
    var sugestao;
    var id;
    
    sugestao = '.json_encode($sugestao).';
    
    $(".mouseOver").mouseover(function(){
        id = $(this).attr("id");
        $("#mostrarTexto").text(sugestao[id].texto_completo);
    });
    
    $(".mouseOver").mouseout(function(){
        $("#mostrarTexto").text("");
    });
});
</script>
';


?>
<br />
<br />
<br />
<div id="mostrarTexto"></div>
</body>
</html>

Entrar

Exibir e Esconder texto no onclick

Pergunta

Lucas B. - Executa

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Marcelo Santos

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades