Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Lúcio Marques

Ocultar linhas de uma tabela

Recommended Posts

Olá, bom dia.

Alguém pode me dar uma força neste para esta função.

Tenho uma tabela que mostra 50 linhas de cadastro, com isso gostaria que mostrasse 25 linhas e logo abaixo haveria um botão "abrir mais" para mostrar os restantes de linhas.

Vi isso em algum site, e achei bem bacana.

 

Agradeço desde já.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ops,

<table width="100%" class="lista-clientes table table-striped table-bordered table-hover" id="dataTables-example">
              <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Data Cadastro</th>
                                        <th>Nome Cooperado</th>
                                        <th>CPF/CNPJ</th>
                                        <th>Ação</th>
                                    </tr>
            </thead>
                                <tbody>
<?php do { ?>
                                    <tr class="odd gradeX">
                                        <td>1</td>
                                        <td>24/07/2017</td>
                                        <td>nome 1</td>
                                        <td class="center">cpf 1</td>
                                        <td style="text-align:right; width: inherit;"> inserir/excluir</td>
                                    </tr>
                                    <tr class="odd gradeX">
                                        <td>2</td>
                                        <td>24/07/2017</td>
                                        <td>nome 2</td>
                                        <td class="center">cpf 2</td>
                                        <td style="text-align:right; width: inherit;"> inserir/excluir</td>
                                    </tr>
                                    <tr class="odd gradeX">
                                        <td>3</td>
                                        <td>24/07/2017</td>
                                        <td>nome 3</td>
                                        <td class="center">cpf 3</td>
                                        <td style="text-align:right; width: inherit;"> inserir/excluir</td>
                                    </tr>
                                     <tr class="odd gradeX">
                                        <td>4</td>
                                        <td>24/07/2017</td>
                                        <td>nome 5</td>
                                        <td class="center">cpf 5</td>
                                        <td style="text-align:right; width: inherit;"> inserir/excluir</td>
                                    </tr>
                                     <tr class="odd gradeX">
                                        <td>5</td>
                                        <td>24/07/2017</td>
                                        <td>nome 5</td>
                                        <td class="center">cpf 5</td>
                                        <td style="text-align:right; width: inherit;"> inserir/excluir</td>
                                    </tr>
                                     <tr class="odd gradeX">
                                        <td>6</td>
                                        <td>24/07/2017</td>
                                        <td>nome 6</td>
                                        <td class="center">cpf 6</td>
                                        <td style="text-align:right; width: inherit;"> inserir/excluir</td>
                                    </tr>
                                     <tr class="odd gradeX">
                                        <td>7</td>
                                        <td>24/07/2017</td>
                                        <td>nome 7</td>
                                        <td class="center">cpf 7</td>
                                        <td style="text-align:right; width: inherit;"> inserir/excluir</td>
                                    </tr>
                                     <tr class="odd gradeX">
                                        <td>8</td>
                                        <td>24/07/2017</td>
                                        <td>nome 8</td>
                                        <td class="center">cpf 8</td>
                                        <td style="text-align:right; width: inherit;"> inserir/excluir</td>
                                    </tr>
                                </tbody>
                        </table>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você poderia poderia colocar os outros 25 itens dentro de uma tag tbody e escondela.

 

<table>
	<tbody>
    	<!-- AQUI VÃO OS REGISTROS QUE FICARÃO VISÍVEIS -->  
	</tbody>
	<tbody id="invisivel" style="display: none;">
    	<!-- AQUI OS REGISTROS QUE FICARÃO ESCONDIDOS -->  
	</tbody>
</table>

<!-- BOTÃO PARA MOSTRAR CONTEUDO ESSCONDIDO -->
<input type="button" onClick="document.getElementById('invisivel').style.display = 'block';" value="Abrir mais" />

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Oi Ivsis. eu fiz o teste e deu certo usando somente html. Mas me deparei com uma questão.

 

Eu uso banco de dados para mostrar os conteúdos. Então, não estou sabendo colocar esta sua lógica para funcionar junto.

Pois o banco de dados mostrar todos os dados cadastrados e não separa as <tbody>.

 

Já quebrei a cabeça, mas não obtive sucesso.

 

Poderia me ajudar mais uma vez nessa.

 

Agradeço desde já

Compartilhar este post


Link para o post
Compartilhar em outros sites

Aqui um código PHP e um JavaScript que devem resolver o seu problema. Depois deles eu explicarei como funcionam

 

$class = 'teste';
$count = 0;
while(/*FATCH DOS DADOS*/){	
	echo'
		<tr class="'.$class.'">
    		//RESTANTE DO CÒDIGO  
		</tr>  
	';
	if($count == 9){
		$class= 'teste2';
	}

	$count += 1;
	
}

 

 

count = 0;
function mostrar(){
	registros = document.getElementsByClassName('teste2');
	
	for(c = 0; c < 10; c++){
		registros[count].style.display = 'block';
		count += 1;
		if(count == registros.length){
			break;
			document.getElementById('botao').style.display = 'none';                      
		}                      
	}
}

 

O código PHP funciona assim: na variável class você deve especificar a classe usada nas suas TAGs <tr> no lugar de teste, e onde está escrito teste2 você coloca o nome da classe dos registros que ficaram escondidos, assim quando os 10 primeiros registros forem escritos a classe é alterada fazendo com que o restante dos registros fique oculto. Não se esqueça de colocar o a propriedade display: none na segunda classe. Para alterar a quantidade de registros mostrados no começo basta alterar o valor 9 no comando IF para o valor desejado.

 

No código JavaScript você deve alterar onde está teste2 para o nome da classe dos registros ocultos. O loop FOR faz com que cada vez que a função for chamada mais 10 registros sejam exibidos, para alterar essa quantidade basta alterar o numero. O IF verifica se todos os registros já foram mostrados, se sim o botão é ocultado. Não esqueça de especificar o ID do seu botão no lugar de botao.

 

Código do botão:

 

<input type="button" value="Abrir Mais" onClick="mostrar()" id="botao" />

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por babylon
      Olá galera tudo bem?
      Deixa eu perguntar, estava mexendo no meu site e queria adicionar em html essa tabela porem esta dando erro pois fica assim:
       

      Porem gostaria que ficasse assim:

      Segue o código da tabela:
      <center><table border="0">
          <tr>
      <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Bicicleta<br> <font color="#0092df">..</font>Track Bikes<br> <font color="#0092df">..</font>Aro 29 TKS</b></a></span><br><br><font size="5"><center><span style="background-color: #A1CD44">DE:</span></font> <br><font size="5"><s>R$ 1.999,99</center></font></s> </td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itembicicleta.jpg"><br><font size="5"><center><span style="background-color: #A1CD44">COM - 60%:</span></font> <br><font size="5">1.199,99</font></center></a></td>
             <td><font color="#ffffff">....</font></td>
              <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Monitor 24"<br> <font color="#0092df">..</font>Samsung<font color="#0092df">aa.aa</font><br> <font color="#0092df">..</font>1ms 144hz</b></a></span></center></td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itemmonitor.jpg"></a></td>
          </tr>
          </table></center>
      O que estaria errado, pois não sei como colocar nessa tabela outro fundo de outra cor, veja que usei td bgcolor="#0092df" para o azul escuro mas não sei como usaria pro "#e4f1fb" para o fundo ficar de azul claro em baixo bem como não ficou correto em altura o "DE:" com o "COM - 60%:".
      Bom é isso, obg.


    • Por clovis.sardinha
      Bom dia.
      Meu problema é o seguinte:
      Estou fazendo uma tabela e preciso mostrar o usuário e várias cidades que pertencem a este usuário.
      O resultado do array é o seguinte:

      Quando passo para a tabela os valores de cidade se repetem para o mesmo usuário até o final e retorna fazendo o mesmo para o próximo usuário. 
      Veja abaixo

       
      Meu código para a tabela é a seguinte:
      <tr> <td align="left"><?php echo $usuario['nome'] ?></td> <td align="left"><?php echo $usuario['nome_orgao'] ?></td> <td align="left"><?php echo $usuario['nome_funcao'] ?></td> <?php foreach($destinos as $key=>$destino):?> <?php $key=0;?> <td align="left"> <?php foreach($destino as $chave=> &$cidade): ?> <?php echo $cidade['cid_nome']."-";?> <?php endforeach;?> </td> <?php $key+=$key; ?> <?php endforeach;?> <td><?php echo date('d/m/Y', strtotime( $usuario['created_at'])) ?></td> <td align="left"><a href="<?php echo base_url('UserAdmin/Usuario/getUsuarioById')."/".$usuario['id_user'] ?>">DETALHES</a></td> </tr> <?php endforeach ?> Onde estou errando? O que tenho de fazer para percorrer este array de modo a aparecer apenas as cidades pertencentes a cada usuário?

    • Por MarceloEBM
      Baixei a tabela do melhorenvio e adaptei para o formato da webcontinental que eles disponibilizam, enviei para o gerente de conta e ele disse que rodou, não atualizou e não tem nenhuma mensagem de erro pra me passar.
       
      Posso estar fazendo errado, alguém tem alguma experiencia com esta tabela de frete?
    • Por Jack Oliveira
      Ola pessoal boa noite preciso salvar umas coisas no banco de dados usando ao clicar no botão que esteja aparecendo sem que recarregue a página
       
      Seria isso aqui
       
      HTML do botão
      <div class="btn-group"> <a href="javascript:void(0)" class="rate-btn toggole-contnet"> <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Sim </a> <a href="javascript:void(0)" class="rate-btn toggole-contnet"> <i class="fa fa-thumbs-o-down" aria-hidden="true"></i> Não </a> </div> No PHP para salvar no banco esta da seguinte forma.
      <?php if(isset($_POST['AvaliComentario'])) { // Se o cookie ainda não foi setado $cookie = isset($_COOKIE["avali_comentario_".$Comentario['id']]) ? $_COOKIE["avali_comentario_".$Comentario['id']] : null; if (!isset($cookie)) { $Adicionar = array( 'comentario_id' => $Comentario['id'], 'up' => post('up'), 'down' => post('down') ); $Query = DBCreate('avali_comentario', $Adicionar); // Se for um sucesso a query if ($Query) { // Seta um cookie setcookie("avali_comentario_".$Comentario['id']."", true, time()+60*60*24*6004); // Retorna false, ou seja, sucesso echo false; Redireciona(''.$URLSHARE.''); }else{ //AbreAlerta("Erro! Ouve um erro ao ".$dados['titulo']."!"); //Redireciona(''.$URLSHARE.''); } }else{ //Sweet('Atenção!!!', 'Você já deu sua Curtida para '.$dados['titulo'].'!', 'warning', 'Fechar'); //AbreAlerta("Ops! Você já deu sua Curtida para ".$dados['titulo']."!"); //Redireciona(''.$URLSHARE.''); } } Só preciso para quando clicar uns dos botão ele salvar sem precisar carregar a página...
       
      Se ter um forma diferente para fazer fico grato pelas dicas que puderem dar ai..
       
       
    • Por Sapinn
      Tenho uma tabela e gostaria de multiplicar a quantidade de produtos para a compra com o valor unitário e gerar o valor total e colocar em outra td, alguém sabe como fazer isso???
       
       <table class="table-default">                 <thead>                     <th>Produto</th>                     <th>Quant</th>                     <th>Valor Unit.</th>                     <th>Valor Total</th>                     <th>Alterar</th>                     <th>Excluir</th>                 </thead>                 <tbody>                     <tr>                         <td>Placa Mãe</td>                         <td class="quant_produto">1</td>                         <td class="valor_produto">100,00</td>                         <td class="total-produto"></td>                         <td><a href=""><i class="bi bi-pencil-fill"></i></a></td>                         <td><a href=""><i class="bi bi-trash-fill"></i></a></td>                     </tr>                                         <tr>                         <td>Memoria Ram DDr3</td>                         <td class="quant_produto">1</td>                         <td class="valor_produto">50,00</td>                         <td class="total-produto"></td>                         <td><a href=""><i class="bi bi-pencil-fill"></i></a></td>                         <td><a href=""><i class="bi bi-trash-fill"></i></a></td>                     </tr>                     <tr>                         <td>Memoria Ram DDr3</td>                         <td class="quant_produto">1</td>                         <td class="valor_produto">50,00</td>                         <td class="total-produto"></td>                         <td><a href=""><i class="bi bi-pencil-fill"></i></a></td>                         <td><a href=""><i class="bi bi-trash-fill"></i></a></td>                     </tr>                 </tbody>             </table>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.