Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » como hacer un boton de busqueda para una tabla de datos?

HTML - como hacer un boton de busqueda para una tabla de datos?

Volver
Nuevo Tema
<<>>
 
Vista:

como hacer un boton de busqueda para una tabla de datos?

Publicado por Angel (1 intervención) el 12/02/2012 19:10:30
Buenas amigos!! estoy realizando una tabla de datos con aproximadamente unos 100 datos y me gustaria programar un boton de busqueda en donde la persona que entre pueda filtrar la información de la tabla solo para obtener los datos que busca.

¿como podriamos programarle un boton o un cuadro asi para una tabla sencilla?
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

como hacer un boton de busqueda para una tabla de datos?

Publicado por Carmen Rivas (1 intervención) el 31/01/2015 16:17:18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<form class="formulariodemo cf" action='http://nombre.blogspot.com/search' method='get'>
  <input type="text" placeholder="ingresar texto ..." required name="q" >
  <button type="submit">buscar</button>
</form>
<style>
 
  .cf:before, .cf:after {
    content:"";
    display:table;
  }
  .cf:after {clear:both; }
  .cf { zoom:1; }
 
   /* el formulario en si mismo */
  .formulariodemo {
    background-color: #303941;

    border-radius: 10px;
    box-shadow: 0 0 2px #606971 inset;

    margin: 0 auto;
    padding: 15px;
    width: 450px;
  }
 
   /* la caja donde se ingresa el texto a buscar */
  .formulariodemo input {
    background-color: #EEE;

    border: none;
    border-radius: 3px 0 0 3px;
    float: left;
    font-family: Tahoma;font-size:15px;font-weight: bold;
    height: 20px;
    padding: 10px 5px;
    width: 330px;
  }
  .formulariodemo input:focus {
    outline: 0;
    background: #FFF;

    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
  }
 
  /* el estilo de del atributo placeholder debe ser declarado para cada navegador de modo separado */
  .formulariodemo input:-moz-placeholder { color: #999; font-weight: normal; font-style: italic; }

  .formulariodemo input::-webkit-input-placeholder { color: #999; font-weight: normal; font-style: italic; }

  .formulariodemo input:-ms-input-placeholder { color: #999; font-weight: normal; font-style: italic; }

 
  /* aquí iría el estilo de del atributo required si es que se desea definirlo */
  .formulariodemo input:required { box-shadow: none; }
 
   /* el botón de envio */
  .formulariodemo button {
    background-color: #9099A1;

    border: none;
    border-radius: 0 3px 3px 0;
    color: #FFF;

    cursor: pointer;
    float: right;
    font-family: Tahoma;
    font-size: 15px;
    font-weight: bold;
    height: 40px;
    overflow: visible;
    padding: 0;
    position: relative;
    text-transform: uppercase;
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
    width: 110px;
  }
  .formulariodemo button:hover{ background: #E54040; } 

  .formulariodemo button:active, .formulariodemo button:focus{ background: #C42F2F; }

  .formulariodemo button:before { /* el detalle del triángulo izquierdo */
    content: "";
    border-color: transparent #9099A1 transparent;

    border-style: solid solid solid none;
    border-width: 8px 8px 8px 0;
    left: -6px;
    position: absolute;
    top: 12px;
  }
  .formulariodemo button:hover:before { border-right-color: #E54040; }

  .formulariodemo button:focus:before { border-right-color: #C42F2F; }    

 
</style>


QUEDARIA DE TU PARTE EDITARLO Y PONERLE TU ESTILO
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

como hacer un boton de busqueda para una tabla de datos?

Publicado por prodest (1 intervención) el 24/06/2015 11:32:56
Hola, intentè usar este còdigo, pero no busca palabras
dentro de mi tabla, simplemente me dirije al documento, tengo que cabiar algo màs para que me senale la info que estoy buscando? Por ejemplo si dentro mi tabla quiero econtrar la palabra "manzana" la coloco en el buscador y èste tendria que senarla.

De antemano gracias, saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar