Ir para conteúdo

POWERED BY:

Arquivado

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

Fernando Wobeto

[Resolvido] Scroll até a TR do conteudo encontrado

Por , em Javascript

Recommended Posts

Fernando Wobeto    0

Fernando Wobeto
Postado

Galera, desenvolvi o script abaixo que conforme voce vai digitando em um campo text ele busca em uma tabela HTML.

O que eu gostaria era se alguem sabe como fazer o scroll ir até a TR encontrada.

 

Segue abaixo o script:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="javascript" src="js/jquery-1.4.3.js"></script>
<script language="javascript">
function buscaGrid(opcoes){ // POR FERNANDO
var defaults = {
		tabela: '',
		valor: '',
		coluna: 1,
		estilo: 'trSelecionadaBuscaGrid'
	}
	var configs = $.extend(defaults,opcoes);	
	$('tbody tr',configs.tabela).each(function(){
		$(this).removeClass('trSelecionadaBuscaGrid');
	});
	if(configs.valor == ''){return false;}
	$('tbody tr td:nth-child('+configs.coluna+'):contains('+configs.valor+')',configs.tabela).parent('tr').addClass(configs.estilo);
}
</script>
<style>
.trSelecionadaBuscaGrid td{ font-weight:bold; background-color:#EDA93C !important; color:#FFF !important;}
</style>
</head>

<body>
<input type="text" value="" size="40" onKeyUp="buscaGrid({valor:this.value,coluna:2,tabela:'#tabela'});">
<table width="400" id="tabela">
  <thead>
  	<tr>
       <th>Codigo</th>
       <th>Numero</th>
       <th align="center">Validade</th>
   </tr>
  </thead>
  <tbody style="overflow-y:scroll; overflow:-moz-scrollbars-vertical; width:100%; height:200px;">
    <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','61');" class="cursorMao">
      <td>61</td><td>155248</td><td align="center">05/10/2014</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','64');" class="cursorMao">
      <td>64</td><td>5432165</td><td align="center">01/01/2013</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','65');" class="cursorMao">
      <td>65</td><td>2165081</td><td align="center">12/05/2012</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','66');" class="cursorMao">
      <td>66</td><td>54981354</td><td align="center">05/12/2015</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','67');" class="cursorMao">
      <td>67</td><td>4524521</td><td align="center">05/09/2011</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','68');" class="cursorMao">
      <td>68</td><td>689542</td><td align="center">11/11/2011</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','69');" class="cursorMao">
      <td>69</td><td>120248</td><td align="center">10/07/2011</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','70');" class="cursorMao">
      <td>70</td><td>5981125245</td><td align="center">15/09/2012</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','71');" class="cursorMao">
      <td>71</td><td>8942132</td><td align="center">11/11/2011</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','72');" class="cursorMao">
      <td>72</td><td>10101010</td><td align="center">10/12/2010</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','73');" class="cursorMao">
      <td>73</td><td>847974613</td><td align="center">01/01/2014</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','74');" class="cursorMao">
      <td>74</td><td>7891321</td><td align="center">04/05/2012</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','75');" class="cursorMao">
      <td>75</td><td>1321881</td><td align="center">02/03/2015</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','76');" class="cursorMao">
      <td>76</td><td>1542481</td><td align="center">06/05/2013</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','77');" class="cursorMao">
      <td>77</td><td>146385413</td><td align="center">06/01/2015</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','78');" class="cursorMao">
      <td>78</td><td>54642121</td><td align="center">14/05/2016</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','79');" class="cursorMao">
      <td>79</td><td>15338551</td><td align="center">01/05/2011</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','80');" class="cursorMao">
      <td>80</td><td>5218312</td><td align="center">05/05/2013</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','81');" class="cursorMao">
      <td>81</td><td>52145851</td><td align="center">02/02/2015</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','82');" class="cursorMao">
      <td>82</td><td>56481358</td><td align="center">01/01/2011</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','83');" class="cursorMao">
      <td>83</td><td>531503</td><td align="center">09/08/2015</td>
    </tr>
              <tr onClick="al_entradaSaidaVeiculo('addLote','13','Amoxicilina','84');" class="cursorMao">
      <td>84</td><td>5131581351</td><td align="center">05/12/2012</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fernando Wobeto    0

Fernando Wobeto
Postado

Resolvido alterando a funçao para:

function buscaGrid(opcoes){ // POR FERNANDO
var defaults = {
		tabela: '',
		valor: '',
		coluna: 1,
		estilo: 'trSelecionadaBuscaGrid'
	}
	var configs = $.extend(defaults,opcoes);	
	$('tbody tr',configs.tabela).each(function(){
		$(this).removeClass('trSelecionadaBuscaGrid');
	});
	if(configs.valor == ''){return false;}
	$('tbody tr td:nth-child('+configs.coluna+'):contains('+configs.valor+')',configs.tabela).parent('tr').addClass(configs.estilo);
	$('tbody',configs.tabela).scrollTop(0);
	var local = $('tbody tr td:nth-child('+configs.coluna+'):contains('+configs.valor+')',configs.tabela).eq(0).parent();
	if(local.length){
		$('tbody',configs.tabela).scrollTop(local.height() * local.attr('sectionRowIndex'));
	}
}

Funcionando 100%

 

 

Obrigado

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