Ir para conteúdo

POWERED BY:

Arquivado

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

tibiru

Barra de Rolagem

Por , em Javascript

Recommended Posts

tibiru    2

tibiru
Postado

Boa noite galera,

 

Estou com um problema no script da tabela abaixo, preciso colocar a barra de rolagem conforme a imagem abaixo

 

20140108138922987780797.jpg

 

Segue meu codigo

 

script.js

$(function(){
$("#tabela input").keyup(function(){


var index = $(this).parent().index();
var nth = "#tabela td:nth-child("+(index+1).toString()+")";
var valor = $(this).val().toUpperCase();
$("#tabela tbody tr").show();
$(nth).each(function(){
if($(this).text().toUpperCase().indexOf(valor) < 0){
$(this).parent().hide();
}
});
});


$("#tabela input").blur(function(){
$(this).val("");
});
});

 

index

 

<!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=utf-8" />




<link rel="stylesheet" type="text/css" href="css/estilo.css"/>


<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="js/script.js"></script> 


</head>


<body>


<div id="conteudo_geral">


<div id="divConteudo">
        <table cellspacing="1" id="tabela">
          <thead>
            <tr>
              <th width="96" align="center">Coluna1</th>
              <th width="102" align="center">Coluna2</th>
              <th width="221" align="center">Coluna3</th>
              <th width="102" align="center">Coluna4</th>
              <th width="85" align="center">Coluna5</th>
              <th width="80" align="center">Coluna6</th>
              <th width="150"  align="center">Ação</th>
            </tr>
            <tr>
              <th><input name="text" id="txtColuna1" size="10"/></th>
              <th><input name="text2" type="text" id="txtColuna2" size="12"/></th>
              <th><input name="text2" type="text" id="txtColuna3" size="30"/></th>
              <th><input name="text2" type="text" id="txtColuna4" size="10"/></th>
              <th><input name="text2" type="text" id="txtColuna5" size="8"/></th>
              <th><input name="text2" type="text" id="txtColuna6" size="6"/></th>
              <th> </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Conteudo1</td>
              <td>Conteudo2</td>
              <td>Conteudo3</td>
              <td>Conteudo4</td>
              <td>Conteudo5</td>
              <td>Conteudo6</td>
              <td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>
            </tr>
           <tr>
              <td>Conteudo1</td>
              <td>Conteudo2</td>
              <td>Conteudo3</td>
              <td>Conteudo4</td>
              <td>Conteudo5</td>
              <td>Conteudo6</td>
              <td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>
            </tr>
           <tr>
              <td>Conteudo1</td>
              <td>Conteudo2</td>
              <td>Conteudo3</td>
              <td>Conteudo4</td>
              <td>Conteudo5</td>
              <td>Conteudo6</td>
              <td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>
            </tr>
           <tr>
              <td>Conteudo1</td>
              <td>Conteudo2</td>
              <td>Conteudo3</td>
              <td>Conteudo4</td>
              <td>Conteudo5</td>
              <td>Conteudo6</td>
              <td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>
            </tr>
           <tr>
              <td>Conteudo1</td>
              <td>Conteudo2</td>
              <td>Conteudo3</td>
              <td>Conteudo4</td>
              <td>Conteudo5</td>
              <td>Conteudo6</td>
              <td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>
            </tr>
           <tr>
              <td>Conteudo1</td>
              <td>Conteudo2</td>
              <td>Conteudo3</td>
              <td>Conteudo4</td>
              <td>Conteudo5</td>
              <td>Conteudo6</td>
              <td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>
            </tr>
           <tr>
              <td>Conteudo1</td>
              <td>Conteudo2</td>
              <td>Conteudo3</td>
              <td>Conteudo4</td>
              <td>Conteudo5</td>
              <td>Conteudo6</td>
              <td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>
            </tr>
           <tr>
              <td>Conteudo1</td>
              <td>Conteudo2</td>
              <td>Conteudo3</td>
              <td>Conteudo4</td>
              <td>Conteudo5</td>
              <td>Conteudo6</td>
              <td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>
            </tr>
           <tr>
              <td>Conteudo1</td>
              <td>Conteudo2</td>
              <td>Conteudo3</td>
              <td>Conteudo4</td>
              <td>Conteudo5</td>
              <td>Conteudo6</td>
              <td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>
            </tr>
           <tr>
              <td>Conteudo1</td>
              <td>Conteudo2</td>
              <td>Conteudo3</td>
              <td>Conteudo4</td>
              <td>Conteudo5</td>
              <td>Conteudo6</td>
              <td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>
            </tr>
</tbody>
        </table>
</div><!-- divConteudo -->
</div><!-- conteudo_geral -->


</body>
</html>

Alguém poderia me ajudar? por favor

 

Muito obrigado

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

tibiru    2

tibiru
Postado

Muito obrigado pelo retorno de vocês mas a barra de rolagem ainda não ficou do jeito que estou querendo...

Veja na imagem abaixo eu marquei de vermelho o local onde quero que fique e queria o topo(em azul) fixo

 

20140109138930938115462.jpg

o topo esta indo junto com a barra de rolagem.

 

Mais uma vez obrigado e Deus abençoe vocês

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ronaldo Marcos    11

Ronaldo Marcos
Postado

Tibiru, você colocou o que o Freitas falou na Div Conteúdo, correto, isso vai criar a barra para a Div, mas como o cabeçalho está na Div a barra vai ficar nele também...

Então você vai ter de deixar o cabeçalho numa div a parte e deixar a configuração que ele passou para a div que ficarão as linhas da tabela sem o cabeçalho..

Compartilhar este post

Link para o post
Compartilhar em outros sites

tibiru    2

tibiru
Postado

Bom dia Ronaldo,

 

Não o que esta acontecendo com essa tabela, pois já coloquei a div contendo o overflow:auto; dentro apenas do conteudo onde quero a barra e não deu certo, já coloquei dentro apenas do <tr> e tbm não deu certo e já coloquei dentro do <tbody> e tbm não deu certo.... e quando crio um div separa a barra aparece a cima do topo... eita tabela que esta me dando trabalho... no momento estou no serviço quando chegar em casa a noite faço todos testes possiveis e coloco aqui para vocês verem o resultado.

 

Obs.: pelo fato da tabela ter um script.js para o autofiltro acho que o mesmo possa esta dando conflito, achei que seria possivel fazer a barra dentro do script.js pois pelo css não estou conseguindo de jeito nenhum...

 

na parte

<table cellspacing="1" id="tabela">

 

tem o id="tabela" que é o mesmo que esta sendo usando no script.js para fazer o autofiltro e não posso tirar essa linha de toda tabela pq o autofiltro não funciona..

 

Alguma luz?

 

Obrigado a todos

 


Compartilhar este post

Link para o post
Compartilhar em outros sites

Ronaldo Marcos    11

Ronaldo Marcos
Postado

<body>

<!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=utf-8" />

 

 

 

 

<link rel="stylesheet" type="text/css" href="css/estilo.css"/>

 

 

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="js/script.js"></script>

 

 

</head>

 

 

<body>

 

 

<div id="conteudo_geral">

 

<div id="cabecalho" style="border: 1px solid red;">

 

<table cellspacing="1" id="tabelacabeca" width="856">

<thead>

<tr>

<th width="96" align="center">Coluna1</th>

<th width="102" align="center">Coluna2</th>

<th width="221" align="center">Coluna3</th>

<th width="102" align="center">Coluna4</th>

<th width="85" align="center">Coluna5</th>

<th width="80" align="center">Coluna6</th>

<th width="148" align="center">Ação</th>

</tr>

<tr>

<th><input name="text" id="txtColuna1" size="10"/></th>

<th><input name="text2" type="text" id="txtColuna2" size="12"/></th>

<th><input name="text2" type="text" id="txtColuna3" size="30"/></th>

<th><input name="text2" type="text" id="txtColuna4" size="10"/></th>

<th><input name="text2" type="text" id="txtColuna5" size="8"/></th>

<th><input name="text2" type="text" id="txtColuna6" size="6"/></th>

<th> </th>

</tr>

</thead>

</table>

</div>

 

<div id="divConteudo" style="border: 1px solid green; height:200px; overflow:auto;">

<table cellspacing="1" id="tabela" width="855">

</div>

<tbody>

<tr>

<td>Conteudo1</td>

<td>Conteudo2</td>

<td>Conteudo3</td>

<td>Conteudo4</td>

<td>Conteudo5</td>

<td>Conteudo6</td>

<td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>

</tr>

<tr>

<td>Conteudo1</td>

<td>Conteudo2</td>

<td>Conteudo3</td>

<td>Conteudo4</td>

<td>Conteudo5</td>

<td>Conteudo6</td>

<td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>

</tr>

<tr>

<td>Conteudo1</td>

<td>Conteudo2</td>

<td>Conteudo3</td>

<td>Conteudo4</td>

<td>Conteudo5</td>

<td>Conteudo6</td>

<td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>

</tr>

<tr>

<td>Conteudo1</td>

<td>Conteudo2</td>

<td>Conteudo3</td>

<td>Conteudo4</td>

<td>Conteudo5</td>

<td>Conteudo6</td>

<td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>

</tr>

<tr>

<td>Conteudo1</td>

<td>Conteudo2</td>

<td>Conteudo3</td>

<td>Conteudo4</td>

<td>Conteudo5</td>

<td>Conteudo6</td>

<td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>

</tr>

<tr>

<td>Conteudo1</td>

<td>Conteudo2</td>

<td>Conteudo3</td>

<td>Conteudo4</td>

<td>Conteudo5</td>

<td>Conteudo6</td>

<td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>

</tr>

<tr>

<td>Conteudo1</td>

<td>Conteudo2</td>

<td>Conteudo3</td>

<td>Conteudo4</td>

<td>Conteudo5</td>

<td>Conteudo6</td>

<td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>

</tr>

<tr>

<td>Conteudo1</td>

<td>Conteudo2</td>

<td>Conteudo3</td>

<td>Conteudo4</td>

<td>Conteudo5</td>

<td>Conteudo6</td>

<td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>

</tr>

<tr>

<td>Conteudo1</td>

<td>Conteudo2</td>

<td>Conteudo3</td>

<td>Conteudo4</td>

<td>Conteudo5</td>

<td>Conteudo6</td>

<td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>

</tr>

<tr>

<td>Conteudo1</td>

<td>Conteudo2</td>

<td>Conteudo3</td>

<td>Conteudo4</td>

<td>Conteudo5</td>

<td>Conteudo6</td>

<td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>

</tr>

</tbody>

</table>

</div><!-- divConteudo -->

</div><!-- conteudo_geral -->

 

 

</body>

</html>

</body>

 

Separei como disse, acredito que tenha de alterar alguma coisa na sua função já que trocou o nome e separou a tabela em duas partes e também no estilos, coloquei uma div de cada cor pra entender o que eu quis dizer....

Compartilhar este post

Link para o post
Compartilhar em outros sites

webdevbr    35

webdevbr
Postado

Ou você poderia simplesmente usar CSS

 

<div id="divConteudo" style="border: 1px solid green;  height:200px; overflow:scroll;">
        <table cellspacing="1" id="tabela" width="855">
          <tbody>
            <tr>
              <td>Conteudo1</td>
              <td>Conteudo2</td>
              <td>Conteudo3</td>
              <td>Conteudo4</td>
              <td>Conteudo5</td>
              <td>Conteudo6</td>
              <td><a href="#">Editar</a> | <a href="#">Detalhamento</a></td>
            </tr>
		</tbody>
	</table>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

FreitasMT    29

FreitasMT
Postado

Tibiru, você colocou o que o Freitas falou na Div Conteúdo, correto, isso vai criar a barra para a Div, mas como o cabeçalho está na Div a barra vai ficar nele também...

 

Então você vai ter de deixar o cabeçalho numa div a parte e deixar a configuração que ele passou para a div que ficarão as linhas da tabela sem o cabeçalho..

 

 

Disse tudo!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito