Ir para conteúdo
Fórum Script Brasil
  • 0

Localizar

olimpia

Perguntado por olimpia,

 Share

Pergunta

olimpia

olimpia

Postado
Postado

Tenho uma tabela , com varias colunas, gostaria de fazer um botão pesquisa, onde o usuario escolhe em qual coluna deseja localizar , digitando o valor

Mas alguém tem alguma ideia de como posso fazer isso?

Link para o comentário
Compartilhar em outros sites

8 respostass a esta questão

Posts Recomendados

  • 0
olimpia

olimpia

Postado
  • Autor
Postado

Tive a seguinte ideia

Coloco id em todas as td, da seguinte forma id=tdx_y, onde x sera o numero da linha e y o numero da coluna

Ai faço uma rotina que fica em loop , comparando o conteudo da td com o valor digitado no campo localizar, sendo que o valor de y, sera o numero da coluna, é x somara sempre 1

ai se a comparação for igual eu sai do loop, guardando o valor do id da ultima td, para que a busaca continue de onde parou

Mas eu gostaria de marcar o valor da td e fazer com que ela seja mostrada

alguém tem ideia de como fazer isto?

Link para o comentário
Compartilhar em outros sites
  • 0
olimpia

olimpia

Postado
  • Autor
Postado

achei este exemplo que muda a cor do texto que estou localizando

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
  <title></title>
  <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
  <meta name="ProgId" content="VisualStudio.HTML">
  <meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
  <style>
  	b{background:yellow}
  </style>
  <script>
  function realce(){
  	
  	palavra=document.forms[0].palavra.value
  	document.forms[0].palavra.value=""
  	document.forms[0].palavra.focus()

  	cont=document.getElementById("conteudo")

  	html=cont.innerHTML

  	html=html.replace(/<\/?b>/gi,"")

  	if(palavra!="")
    html=eval("html.replace(/("+palavra+")/gi,'<B>$1</B>')")

  	cont.innerHTML=html

  }
  </script>
	</head>
	<body>
  <H1>Exemplo 10</H1>
  <FORM id="Form1" onsubmit="return false">
  	Insira a palavra a realçar:<BR>
  	<INPUT id="Text1" type="text" value="tableless" name="palavra"><INPUT id="Button1" onclick="realce()" type="button" value="OK" name="Button1">
  </FORM>
  <DIV id="conteudo">
  	O Caminho Suave para o Tableless A maior parte dos desenvolvedores web, 
  	designers ou programadores, começaram antes do surgimento dos movimentos em 
  	prol dos <A title="Web Standards Project" href="http://www.webstandards.org/">padrões 
    web</A>, usando tabelas para montar layouts em editores
  	<ACRONYM title="What You See Is What You Get, Editores Visuais">WYSIWYG</ACRONYM>, 
  	e ainda hoje este método é usado na maioria dos projetos de internet. Logo, é 
  	natural que muita gente, ao começar a entender o valor dos <A title="Web Standards Project" href="http://www.webstandards.org/">
    padrões</A>, se pergunte como migrar do desenvolvimento "tradicional" para 
  	o desenvolvimento de código semanticamente coerente.</P>
  	<P>É um caminho muito duro o que separa o desenvolvedor acostumado a editores 
    visuais do desenvolvimento de código coerente. E é muito comum que o designer 
    desista após uma primeira tentativa frustrada de desenvolver um website 
    tableless, com layout <A title="Cascading Style Sheets" href="http://www.w3.org/Style/CSS/">
    	CSS</A> e <A title="Extensible HyperText Markup Language" href="http://www.w3schools.com/xhtml/">
    	XHTML</A> <A title="W3C MarkUp Validation Service" href="http://validator.w3.org/">
    	validado</A>.</P>
  	<P>Por isso gostaria de propor um caminho gradual, mais suave, para aqueles que 
    querem se aventurar pela primeira vez pelos <A title="Web Standards Project" href="http://www.webstandards.org/">
    	padrões web</A>. O princípio desse método é da recompensa. Você pode obter 
    um grande benefício aproximando seu código dos <A title="Web Standards Project" href="http://www.webstandards.org/">
    	padrões web</A>, mesmo que não faça tudo de uma vez. Quero mostrar como 
    você pode começar, e obter benefícios imediatos.</P>
  	<H2>Limpe seu HTML</H2>
  	<P>A minha primeira recomendação é que você estude <A title="Cascading Style Sheets" href="http://www.w3.org/Style/CSS/">
    	CSS</A>. Comece pela formatação básica de fonte, cor e tamanho. Isso vai te 
    garantir código menor e produtividade maior com pouquíssimo esforço.</P>
  	<P>Assim, ao criar um item de menu, você vai evitar códigos como este:</P>
  	<PRE>  &lt;a href="parceiros.asp"&gt;&lt;font 
  face="Arial, Helvetica, Sans-serif" size="2" 
  color="#FF3300"&gt;&lt;b&gt;Parceiros&lt;/b&gt;&lt;/font&gt;&lt;/a&gt;
    </PRE>
  	<P>Colocando no lugar:</P>
  	<PRE>&lt;a href="parceiros.asp" class="menu"&gt;Parceiros&lt;/a&gt;</PRE>
  	<P>Tendo no <A title="Cascading Style Sheets" href="http://www.w3.org/Style/CSS/">CSS</A>:</P>
  	<PRE>	</PRE>
  </DIV>
	</body>
</html>

Mas se tenho uma tela com barra de rolagem e o texto que pedi para localizar não estiver na area visivel do browser, ou seja, a cor do texto será alterada mas ele não estara visivel para o usuario

Como faço para movimentar a barra de rolagem para que o texto fica visivel para o usuario?

Link para o comentário
Compartilhar em outros sites
  • 0
renan_doidera

renan_doidera

Postado
Postado

Você tem que tentar entender o funcionamento do script para conseguir modificar ele. Eu coloquei a tag que determina o flag 

<a name="nome"> tags </a>
O nome do flag eu coloquei sendo um número randômico, somado com o segundo atual do relógio quando o script é rodado. Aì no final do script eu chamo a bandeira assim: 
http://www.endereço.com.br/pagina.htm#nome
Sacou? Só que ia ter um problema... se eu fizesse só isso, se eu fosse buscar dois nomes na página, iria dar erro, iria chamar duas bandeiras... 
 http://www.endereço.com.br/pagina.htm#nome1#nome2
E quanto mais eu fosse executando a função iria sempre incrementando alí, dando errado . Por isso que eu faço a verificação para saber se o endereço já tem o "#": 
if ( endereco.indexOf("#") == -1 )
Se não tiver beleza, eu adiciona o flag normal, caso tenha eu pego o valor da string ATÉ ele. E depois atualizo o endereço. Só tem uma coisa que eu não entendi nesse script... Essa linha: 
html=eval("html.replace(/("+palavra+")/gi,'<aname=\""+randomico+"\"><B>$1</B></a>')");
Mais especificamente o "$1", deve ser algo relacionado com alguma propriedade da expressão regular que é usada aí... Se alguém souber, help-me! Éh isso Leandro... segue o código abaixo... 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 <title></title>
 <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
 <meta name="ProgId" content="VisualStudio.HTML">
 <meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
 <style>
  b{background:yellow; color: red}
 </style>

 <script>

function realce()
{

	endereco = document.location.href;  

	var data = new Date();
	var segundos = data.getSeconds();
	var randomico = Math.random();
	var randomico = eval("parseInt(randomico*100)+parseInt(segundos)");

	palavra=document.forms[0].palavra.value
	document.forms[0].palavra.value=""
	document.forms[0].palavra.focus()


	cont=document.getElementById("conteudo")
	html=cont.innerHTML
	html=html.replace(/<\/?b>/gi,"")


	if(palavra!="")
  html=eval("html.replace(/("+palavra+")/gi,'<a name=\""+randomico+"\"><B>$1</B></a>')");

	cont.innerHTML=html;
  
	if ( endereco.indexOf("#") == -1 ) 
	{
  location.href = endereco+"#"+randomico;
	}
	else
	{  
  endereco = endereco.substring(0,endereco.indexOf("#"));
  location.href = endereco+"#"+randomico;
	}

 }
</script>

</head>
<body>
 <H1>Exemplo 10</H1>
 <FORM id="Form1" onsubmit="return false">
  Insira a palavra a realçar:<BR>
  <INPUT id="Text1" type="text" value="tableless" name="palavra"><INPUT id="Button1" onclick="realce()" type="button" value="OK" name="Button1">
 </FORM>
 <DIV id="conteudo">
  O Caminho Suave para o Tableless A maior parte dos desenvolvedores web, 
  designers ou programadores, começaram antes do surgimento dos movimentos em 
  prol dos <A title="Web Standards Project" href="http://www.webstandards.org/">padrões 
   web</A>, usando tabelas para montar layouts em editores
  <ACRONYM title="What You See Is What You Get, Editores Visuais">WYSIWYG</ACRONYM>, 
  e ainda hoje este método é usado na maioria dos projetos de internet. Logo, é 
  natural que muita gente, ao começar a entender o valor dos <A title="Web Standards Project" href="http://www.webstandards.org/">
   padrões</A>, se pergunte como migrar do desenvolvimento "tradicional" para 
  o desenvolvimento de código semanticamente coerente.</P>
  <P>É um caminho muito duro o que separa o desenvolvedor acostumado a editores 
   visuais do desenvolvimento de código coerente. E é muito comum que o designer 
   desista após uma primeira tentativa frustrada de desenvolver um website 
   tableless, com layout <A title="Cascading Style Sheets" href="http://www.w3.org/Style/CSS/">
    CSS</A> e <A title="Extensible HyperText Markup Language" href="http://www.w3schools.com/xhtml/">
    XHTML</A> <A title="W3C MarkUp Validation Service" href="http://validator.w3.org/">
    validado</A>.</P>
  <P>Por isso gostaria de propor um caminho gradual, mais suave, para aqueles que 
   querem se aventurar pela primeira vez pelos <A title="Web Standards Project" href="http://www.webstandards.org/">
    padrões web</A>. O princípio desse método é da recompensa. Você pode obter 
   um grande benefício aproximando seu código dos <A title="Web Standards Project" href="http://www.webstandards.org/">
    padrões web</A>, mesmo que não faça tudo de uma vez. Quero mostrar como 
   você pode começar, e obter benefícios imediatos.</P>
  <H2>Limpe seu HTML</H2>
  <P>A minha primeira recomendação é que você estude <A title="Cascading Style Sheets" href="http://www.w3.org/Style/CSS/">
    CSS</A>. Comece pela formatação básica de fonte, cor e tamanho. Isso vai te 
   garantir código menor e produtividade maior com pouquíssimo esforço.</P>
  <P>Assim, ao criar um item de menu, você vai evitar códigos como este:</P>
  <PRE>  &lt;a href="parceiros.asp"&gt;&lt;font 
 face="Arial, Helvetica, Sans-serif" size="2" 
 color="#FF3300"&gt;&lt;b&gt;Parceiros&lt;/b&gt;&lt;/font&gt;&lt;/a&gt;
   </PRE>
  <P>Colocando no lugar:</P>
  <PRE>&lt;a href="parceiros.asp" class="menu"&gt;Parceiros&lt;/a&gt;</PRE>
  <P>Tendo no <A title="Cascading Style Sheets" href="http://www.w3.org/Style/CSS/">CSS</A>:</P>
  <PRE> </PRE>
 </DIV>



</body>
</html>

Falows

Link para o comentário
Compartilhar em outros sites
  • 0
olimpia

olimpia

Postado
  • Autor
Postado

valeu Renan, era iso que eu queria , agora preciso fazer de uma forma que clicando novamente no botão Ok , seja mostrado o proximo valor encontrado

Mas o problema e que o botão Ok esta no inicio da pagina, estava com ideia de fazer dois div, onde no 1º ficaria o campos e o botão para localizar e no segundo os texto

Na realidade esta busca sera feita em uma deterninada coluna da tabela, onde o usuario escolhera atraves de um select, então no 1º div ficara o campo pesquisa, o select com o nome das colunas e o botão OK

Mas como criar uma barra de rolagem no segundo div onde ficara a tabela?

Link para o comentário
Compartilhar em outros sites
  • 0
renan_doidera

renan_doidera

Postado
Postado

Uma coisa de cada vez... Agora você precisa fazer de forma que clicando no botão denovo, apareça o segundo valor encontrado. Bem também dá para fazer isso.Você vai ter que aprender Expressões Regulares pra fazer, é a única forma na qual eu visualizo uma solução agora. Usando a função "match()" para armazenar num array os resultados encontrados junto com uns 3 ou 4 caracteres que vem antes e depois para poder diferencia-los ( /....palavra..../ ) cria uma função para chamar elemento por elemento desse array, que vão ser os resultados obtidos, a cada clique que você dê em algum lugar incrementa uma variavel e chama o próximo elemento, que você joga na função "realce()" . Para usar assim você terá que setar a função realce dependente de um argumento, que é a palavra que vai ser realçada. O botão ok fica sempre láh em cima mesmo, você pode criar um botão que acompanha o scrolling da janela para a pessoa apertar e exibir o próximo resultado, aí pode fazer que depois que a pessoa clique nesse botão para achar o ultimo resultado, suma com ele também. Você tem que aprender RegExp pra poder fazer isso que quer cara. É bem tranquilo, vou te mandar o link de um tutorial bem legal que eu achei...

http://www.devshed.com/c/a/JavaScript/Unde...egExp-Object/0/

Com relação a criar barras de rolagem em divs... usa essas barras personalizadas, que são criadas por javascript.

Falows

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...