-
Cómo cambiar los colores de fondo de tabla con javascript
-
JavaScript es un lenguaje de script del lado del cliente que puede ser usado para alterar dinámicamente casi todos los aspectos de una página web, incluyendo los estilos que se definen e implementan con hojas de estilo en cascada (CSS). JavaScript permite a los programadores crear funciones que se ejecutan cuando un usuario interactúa con la interfaz de usuario, por ejemplo, haciendo clic en los botones o hipervínculos. Estas funciones pueden alterar posteriormente algún aspecto de la interfaz de usuario, por ejemplo, cambiando el color de fondo de un archivo HTML "<table>" etiqueta.Instrucciones
1 Abra un editor de texto y crear un nuevo archivo con el nombre changeBackground.html. Añadir algunas etiquetas HTML para el archivo que incluye una etiqueta abierta "<html>", una etiqueta abierta "<head>", un cierre "</ head>" etiqueta, un proceso abierto "<body>" etiqueta, un cierre "< / body> "etiqueta, y un cierre" etiqueta </ html> ". Estas etiquetas comprenden un esquema básico página HTML.
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
2 Editar changeBackground.html y añadir una etiqueta "<style>" entre la "<head>" y "</ head>" etiquetas. Establecer el atributo de estilo "tipo" a "text / css". Crear un estilo para el "<table>" etiqueta HTML y establecer el ancho del estilo a "200px", la altura del estilo de "200px", y del estilo del fondo-color en "azul". Insertar una etiqueta "</ style>" para cerrar el estilo.
<Html>
<Head>
<Style type = "text / css">
mesa {
Anchura: 200px;
altura: 200px;
background-color: blue;
}
</ Style>
</ Head>
<Body> </ body>
</ Html>
3 Añadir una etiqueta JavaScript "<script>" entre la "<head>" y "</ head>" etiquetas inmediatamente después de la etiqueta "</ style>". Añadir una función de JavaScript después de la etiqueta "<script>" llamado "CHANGETABLE ()". La función CHANGETABLE () toma un argumento, "color", y utiliza el valor del argumento de color de fondo de la tabla. Insertar un par de llaves ( "{}") para indicar la ubicación para el código de la función e insertar una etiqueta "</ script>" para cerrar la secuencia de comandos.
<Html>
<Head>
<Style type = "text / css">
mesa {
Anchura: 200px;
altura: 200px;
background-color: blue;
}
</ Style>
<Script type = "text / javascript">
función CHANGETABLE (color)
{
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
4 Editar la función CHANGETABLE. Agregar un comando entre las dos llaves que establece el color de fondo de una tabla, "pagetable", al color almacenado en la variable color.
<Html>
<Head>
<Style type = "text / css">
mesa {
Anchura: 200px;
altura: 200px;
background-color: blue;
}
</ Style>
<Script type = "text / javascript">
función CHANGETABLE (color)
{
. Document.getElementById ( 'pagetable') style.backgroundColor = color;
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
5 Añadir un enlace ( "<a>") entre la etiqueta "<body>" y "</ body>" etiquetas. Ajuste del valor de href del enlace a "javascript: void (0)" para volver nula cuando se hace clic en el enlace. Añadir un evento onclick () para el enlace que llama a la función CHANGETABLE (color) y pasa el valor "verde". Dar el enlace el valor de texto "Cambiar color de la tabla a verde." Insertar una etiqueta de cierre "</a>".
<Html>
<Head>
<Style type = "text / css">
mesa {
Anchura: 200px;
altura: 200px;
background-color: blue;
}
</ Style>
<Script type = "text / javascript">
función CHANGETABLE (color)
{
. Document.getElementById ( 'pagetable') style.backgroundColor = color;
}
</ Script>
</ Head>
<Body>
<a href="javascript:void(0)" onclick="changeTable('green');"> mesa de cambio de color a verde. </a>
</ Body>
</ Html>
6 Añadir un segundo enlace de etiqueta ( "<a>"). Ajuste del valor de href de la etiqueta de "javascript: void (0)" para volver nula cuando se hace clic en el enlace. Añadir un evento onclick () para el enlace que llama a la función CHANGETABLE (color) y pasa el valor 'amarilla'. Dar el enlace el valor de texto "Cambiar color de la tabla de color amarillo." Insertar una etiqueta de cierre "</a>".
<Html>
<Head>
<Style type = "text / css">
mesa {
Anchura: 200px;
altura: 200px;
background-color: blue;
}
</ Style>
<Script type = "text / javascript">
función CHANGETABLE (color)
{
. Document.getElementById ( 'pagetable') style.backgroundColor = color;
}
</ Script>
</ Head>
<Body>
<a href="javascript:void(0)" onclick="changeTable('green');"> mesa de cambio de color a verde. </a>
<a href="javascript:void(0)" onclick="changeTable('yellow');"> mesa de cambio de color a amarillo. </a>
</ Body>
</ Html>
7 Añadir una etiqueta "<table>" después de las etiquetas de enlace. Dar la etiqueta "<table>" un id "pagetable". Añadir un "<tr>" etiqueta abierta y una etiqueta abierta "<td>". Cierre la "etiqueta </ td> y cierre el" </ tr> "etiqueta. Cierre la" etiqueta </ table> "y guardar y cerrar changeBackground.html.
<Html>
<Head>
<Style type = "text / css">
mesa {
Anchura: 200px;
altura: 200px;
background-color: blue;
}
</ Style>
<Script type = "text / javascript">
función CHANGETABLE (color)
{
. Document.getElementById ( 'pagetable') style.backgroundColor = color;
}
</ Script>
</ Head>
<Body>
<a href="javascript:void(0)" onclick="changeTable('green');"> mesa de cambio de color a verde. </a>
<a href="javascript:void(0)" onclick="changeTable('yellow');"> mesa de cambio de color a amarillo. </a>
<Table id = "pagetable">
<Tr>
<Td>
</ Td>
</ Tr>
</ Table>
</ Body>
</ Html>
8 changeBackground.html abierta en un navegador web. A 200 píxeles por 200 píxeles azul tabla mostrará en la página. Haga clic en "Cambiar el color a verde mesa." enlace y verificar que el fondo de la tabla cambia a verde. Haga clic en "Cambiar el color a amarillo mesa." enlace y verificar que el fondo de la tabla cambia a amarillo.
Consejos y advertencias
- JavaScript puede ser utilizado para cambiar filas individuales dentro de tablas ( "<tr>"), o células individuales ( "<td>").
- JavaScript se puede utilizar para cambiar prácticamente cualquier elemento de estilo de mesa, incluyendo las fronteras, la anchura, altura y estilos.
- funciones de JavaScript y el código se pueden utilizar para alterar los estilos que se incluyen en las hojas de estilo externas, hojas de estilo internas o estilos en línea.
- Las tablas deben ser utilizados para presentar los datos en formato tabular. Las tablas no son un enfoque de mejores prácticas cuando se utilizan para implementar interfaces de usuario.
