1) Añadir HTML:
————-
- ¿Cómo sabe "cuánta sangría" usar en todo el html? ¿Es solo una conjetura o hay una regla?
- ¿Cuáles fueron las funciones PHP más complejas que ha desarrollado y cuáles fueron sus principales funcionalidades en detalles exactos?
- ¿Por qué las imágenes jpeg con pérdida son las predeterminadas para las imágenes descargadas en línea?
- ¿Qué tecnologías web están ejecutando healthcare.gov?
- Acabo de aprender Ruby on Rails de un campamento de entrenamiento. ¿Debo enseñarme a mí mismo la pila MEAN para obtener más oportunidades de trabajo en 2016?
Nombre | País |
---|---|
Alfreds Futterkiste | Alemania |
Berglunds snabbkop | Suecia |
Island Trading | Reino Unido |
Koniglich Essen | Alemania |
2) Añadir CSS:
——————–
#myInput {
background-image: url (‘/ css / searchicon.png’); / * Agregar un icono de búsqueda para ingresar * /
posición de fondo: 10px 12px; / * Posiciona el icono de búsqueda * /
repetición de fondo: sin repetición; / * No repita la imagen del icono * /
ancho: 100%; / * Ancho completo * /
tamaño de fuente: 16px; /* Aumenta el tamaño de la fuente */
acolchado: 12px 20px 12px 40px; / * Agregar algo de relleno * /
borde: 1px sólido #ddd; / * Agregar un borde gris * /
margen inferior: 12px; / * Agrega algo de espacio debajo de la entrada * /
}
#mi mesa {
colapso del borde: colapso; / * Contraer bordes * /
ancho: 100%; / * Ancho completo * /
borde: 1px sólido #ddd; / * Agregar un borde gris * /
tamaño de fuente: 18px; /* Aumenta el tamaño de la fuente */
}
#myTable th, #myTable td {
alinear texto: izquierda; / * Texto alineado a la izquierda * /
acolchado: 12px; / * Agregar relleno * /
}
#myTable tr {
/ * Agregar un borde inferior a todas las filas de la tabla * /
borde inferior: 1px sólido #ddd;
}
#myTable tr.header, #myTable tr: hover {
/ * Agregar un color de fondo gris al encabezado de la tabla y al pasar el mouse * /
color de fondo: # f1f1f1;
}
3) Agregar JavaScript:
————————
function myFunction () {
// Declarar variables
entrada var, filtro, tabla, tr, td, i;
input = document.getElementById (“myInput”);
filtro = input.value.toUpperCase ();
table = document.getElementById (“myTable”);
tr = table.getElementsByTagName (“tr”);
// Recorre todas las filas de la tabla y oculta las que no coinciden con la consulta de búsqueda
para (i = 0; i <longitud tr; i ++) {
td = tr [i] .getElementsByTagName (“td”) [0];
si (td) {
if (td.innerHTML.toUpperCase (). indexOf (filtro)> -1) {
tr [i] .style.display = “”;
} más {
tr [i] .style.display = “ninguno”;
}
}
}
}