Formato automático del HTML con Javascrip

Tranlsated by M. Perez

ALGO AGREGAR A SU BOLSO DE TRUCOS - la CEBRA del ASESINO TABULA

A miembro de A en el foro de Killersites.com mencionado en un poste cómo él trabajaba con (o intentaba trabajar con) un artículo que él leyó recientemente por un individuo nombrado David F. Molinero.

Básicamente, el artículo tenía cierto código interesante del Javascript que cambió automáticamente el color del fondo de cada fila del nd 2 en una tabla del HTML. Las razones para que el deseo haga esto son muchas; aquí está un par los grandes:

• To make the table look good
• Hacer que la tabla parece buena hacer la información de la tabla más fácil leerle

Puede ver un ejemplo aquí.

Deseo precisar un par de cosas:

1. Esto está para las tablas que se están utilizando para presentar datos. Piense en las hojas de balance, MS sobresalen et cetera.
2. Típicamente cuando usted está exhibiendo datos en una tabla, usted la estaría aspirando adentro de una base de datos usando algo como PHP (artículos sobre PHP que viene pronto los saltamontes!) y en ese caso usted apenas haría esto en el código de PHP y no incomodaría con hacer esto con Javascript.

Debido a ésa (la cosa de PHP), cuando primero heché una ojeada el artículo, no presté mucha atención. ¡Pero cerca de 2 semanas más adelante, encontré un lugar (mi página nueva del) HTML tags/codes donde podría utilizar esta escritura!

Conseguí tan el código del Javascript, y puesto le al uso en mi página. Todo trabajó muy bien ' fuera de la caja ', a excepción de una cosa - no permitiría que usted utilizara la escritura en más de una tabla en la página... Necesité utilizarlo en muchos.

Habría podido tomar la salida fácil, y apenas manualmente coloreado el muchos tabule las filas. Pero realicé rápidamente que la manera manual iba a ser justa demasiado trabajo freaking - demasiado trabajo apenas va contra mis sensibilidades básicas. ¡Demasiado juego video que juega tiempo sería perdido, así que algo tuvo que ser hecho!

Salí de mi nerd- casquillo y comencé a golpear lejos en el Javascript y el código del CSS que hicieron que esta escritura nifty trabaja. Pensando podría también escribir un artículo agradable fuera de esto, yo coloqué en una variación de la escritura (fuera de algunos) a la cual hizo fácil aplicar la escritura a tantas tablas como usted deseó; fácil incluso para el non-programmer.

El artículo original fue llamado las ' tablas de la cebra (como en rayas de la cebra), yo pensó tan que mi versión modificada de la escritura se debe llamar ' las tablas de la cebra del asesino.

ARTÍCULO: CREAR LAS TABLAS de la CEBRA del ASESINO

Puesto que esto es un artículo acerca de usar la cebra del asesino tabula la herramienta (escritura) y no sobre cómo los trabajos de programación del Javascript, yo le ahorrarán los detalles del Javascript.

El ese ser dicho, usted está libre entrar el código y comprobarlo hacia fuera para saber si hay se. Usted lo encontrará comentó bien (mis el propios y una cierta izquierda encima de David F. Molinero) junto con un cierto código de prueba que le permita ' considere ' el trabajo de la escritura como él los estilos las tablas.

La cosa entera se puede descargar aquí.

Usted encontrará en el archivo de CIERRE RELÁMPAGO un HTML page simple y los js archivan con todo el Javascript. Dejé el código requerido del CSS en el HTML page puesto que es realmente corto, pero usted puede extraerlo fácilmente en él debe poseer el documento del CSS.

LOS 3 PASOS A HACER ESTE TRABAJO

1. que aplica el CSS
2. aplicación de las identificaciones de la tabla
3. Cambiando la etiqueta del ' cuerpo ' del HTML ' para hablar ' con la escritura
4. (opcional) fijando el color estándar en los js archive

1. APLICANDO EL CSS

Comencemos mirando el CSS:

taglist {


frontera: sólido 1px # 666666;

margin-top:40px; margin-bottom:30px;

}

.td tbody del tr del taglist {

fuente-familia: "grande del lucida", verdana, sans-serif;

fuente-tamaño: 8pt;

acolchado: 3px 8px;


frontera-izquierdo: sólido 1px # D9D9D9;

}

.td tbody del taglist tr.selected {

fondo-color: # 3d80df;

color: # ffffff;

fuente-peso: en negrilla;

frontera-izquierdo: sólido 1px # 346DBE;

frontera-fondo: sólido 1px # 7DAAEA;


}

Uniforme si usted no sabe ning&u;´n CSS, todo lo que usted realmente necesita saber sobre el snippet antedicho del código es:

Es código del CSS - el CSS se utiliza para labrar Web pages. Este código apunta nuestras tablas específicamente. En una cáscara de nuez, he creado una clase del CSS llamada ' taglist ' y 2 otros selectores apuntados del CSS (' td tbody del tr del taglist ' y ' td tbody del taglist tr.selected ') esa ayuda para definir más lejos la mirada de las tablas.

Qué usted tiene que hacer debe ' marcar ' sus tablas con etiqueta con la clase: ' taglist '. Usted hace esto yendo a su código de la tabla y escribe esto:

<table id="table1" class="taglist">

No voy a entrar los detalles del CSS; ésta es materia estándar y si usted está teniendo problemas, usted debe ir a mi Web site de la clase particular del CSS.

Una vez más todo lo que usted necesita saber es ése para cada tabla que usted desee haber labrado, necesitará este texto incluido en su etiqueta: class="taglist"

2. QUE MARCAN ' LAS TABLAS con etiqueta QUE SE LABRARÁN (aplicando las identificaciones)

La cosa siguiente que usted necesita hacer, es elasticidad a la identificación única a cada tabla que usted desee para haber trabajado encendido por la cebra tabule la escritura.

Hacer esto, todo lo que usted necesita hacer debe ' marcar ' cada tabla con etiqueta con el texto ' identificación = ' y el nombre único usted desea darlo. El nombre ' único ' puede ser cualquier cosa mientras es la única etiqueta en la página con una identificación de ese nombre.

Por ejemplo: ... ...

	<table id="table1" class="taglist">

	…

	</table>

	<table id="table2" class="taglist">

	…

	</table>

Usted notará que una tabla tiene una identificación de ' table1 ' y la otra tiene una identificación de 'table2 '. No puede haber otra tabla (o cualquier otra etiqueta del HTML) con cualquiera de estas identificaciones. ¿Espero que este tenga sentido? El Javascript utiliza estas identificaciones únicas para encontrar las tablas que usted desea haber afectado por la escritura.

3. ¡cCómo SOMOS ' QUE HABLAN CON ' LA PROGRAMACIÓN

Finalmente, nos casi hacen! La autorización, la cosa pasada que usted tiene que hacer es ' hablar ' con la escritura de las tablas de la cebra del asesino. Usted hace esto en la etiqueta del ' cuerpo ' del HTML. Como con muchas otras cosas en vida, es apenas más fácil si le demuestro:

<body onload="stripeTables('table1','red','table2', 'blue');">

Tan qué he hecho en la etiqueta del ' cuerpo ' del HTML debo decir el browser ' hablar ' con la escritura llamada los ' stripeTables y alimenté a escritura ' de los stripeTables una cierta información que necesita - el nombre de la tabla y el color quisiera que la fila alterna fuera. Para cada Tabla I quiera que la escritura afectara, necesito incluir la identificación única de las tablas (esa la di) y el color:

'table1', 'red ', - para la primera tabla

'table2 ', 'azul ' - para la 2da tabla

Como usted puede ver que trabaja siempre en pares: tabla identificación + color. Usted también notará que I solo cotizó cada identificación de la tabla y cada color con comas mientras tanto.

Si usted es un poco confuso por esto, no se preocupe; pronto claro para arriba para usted. La transferencia directa justa la muestra y la intenta hacia fuera, cambia los colores y considera qué sucede. Si usted todavía está teniendo problemas, el poste justo una pregunta al foro y al mí de Killersites.com contestará.

4. FIJAR OTRO COLOR ESTÁNDAR

Si por una cierta razón usted desea cambiar el color estándar usado en todas las tablas (el otro color que hace el patrón de la cebra en sus tablas) usted necesitará abrir el ' archivo de killerZebraStripes.js' y buscar este código:

Qué usted está buscando realmente es esta línea del código:

What you are actually looking for is this line of code:

oddColor del var = "# eee";

Esto se puede encontrar alrededor de la línea 30 de la página. Ahora se fija a un color apagado blanco: "# eee". Usted puede cambiarlo a cualquier otro color que usted desee - tipo justo él adentro y re-ahorra el archivo.

Esperanza de la CONCLUSIÓN

I usted encontró la escritura de las tablas de la cebra del asesino interesante y fácil utilizar. Con esta escritura a disposición, usted podrá labrar todas sus tablas fácilmente y rápidamente.

ALGUNOS OTROS WEB SITE

www.how-to-build-websites.com: Una clase particular diseñó enseñar a principiantes totales los fundamentales de un diseño moderno

www.csstutorial.net de la tela: Un Web site dedicado para enseñar a principiantes totales la hermana technology/language al HTML: Css. El CSS (hojas de conexión en cascada del estilo) es a debe aprender el aspecto del diseño de la tela que da a diseñador de la tela control del total sobre la disposición de página y el estilo.

www.secretsites.com: Un asir-bolso de extremidades y trucos que he tomado durante los 10 años pasados de.

Por: Stefan N Mischook
de octubre el 24, 2004

Top

© 1996 - Killersites.com – All rights reserved