Tutoriales
Tutoriales ~ javascript ~ Ocultar Filas| Ocultar Filas | |
|
Fecha: 2008-12-07 Nivel: Medio Impresiones: Autor: Shinji Categoria: javascript Descripcion: Con este tutorial aprenderas a ocultar filas de tablas.. |
Bookmark:
  E-mail to a friend View printable version Permanlink |
Para poder lograr ocultar y mostrar filas dentro de una tabla tenemos que identificar las filas a ocultar desde su etiqueta <tr>, en este caso el intificador los llamaremos como "Row" Y tendremos que hacer una funcion javascript, a esta la llamaremos "Hiderow"
ahora despues de crear la tabla tendremos un codigo mas o menos asi.
<table width="300" border="1">
<tr id="Row"><th>fila-1</th><th>fila-2</th><th>fila-3</th></tr>
<tr><td>celda</td><td>celda</td><td>celda</td></tr>
<tr><td>celda</td><td>celda</td><td>celda</td></tr>
</table>
<p><button onclick="Hiderow()" >Show / Hide</button></p>
El codigo javascript es el que se encarga de ocultar y mostrar las filas.<tr id="Row"><th>fila-1</th><th>fila-2</th><th>fila-3</th></tr>
<tr><td>celda</td><td>celda</td><td>celda</td></tr>
<tr><td>celda</td><td>celda</td><td>celda</td></tr>
</table>
<p><button onclick="Hiderow()" >Show / Hide</button></p>
Primero nesecitamos hacer referencia hacia la fila con la funcion getElementById()
Quedaria algo asi
function Hiderow(){ var row = document.getElementById("Row");}
Nosotros podemos controlar si una fila deberia mostrarse o no, simplemente como poniendo de estilo none
row.style.display = 'none';
El codigo completo:
<script type="text/javascript">
function Hiderow(){
var row = document.getElementById("Row");
if (row.style.display == '') row.style.display = 'none';
else row.style.display = '';
}
</script>
function Hiderow(){
var row = document.getElementById("Row");
if (row.style.display == '') row.style.display = 'none';
else row.style.display = '';
}
</script>
Recuerda colocar este dento del <head> Y este fue mi resultado. Click
Comentarios
Comentarios: 1. Pagina 1 de 1. Rating: 
Omar xlowx@hotmail.com | 5:26am on Thursday, January 1st, 2009 |
SDEEGE | |
Ads
Ultimos Tutoriales
Efecto de Luz en: photoshop el: 2008-12-08 por: Shinji
Triple Borde en: photoshop el: 2008-12-08 por: Shinji
Fondos con Pinceles en: photoshop el: 2008-12-08 por: Shinji
Glowing Skin en: photoshop el: 2008-12-08 por: Shinji
Negar Acceso a Archivos en: misc el: 2008-12-07 por: Shinji
Ultimos Layouts
