Seleccionar numero de filas a mostrar tabla html

putoquintana · #1 (**permalink**) 14/11/2011, 03:51

Hola a todos,

mi dilema es el siguiente :

tengo una tabla con 20 filas, al cargar la página quiero que estás aparezcan ocultas. Quiero colocar un botón desplegable ( opciones del 1 al 20 ) que me permitar mostrar el número de líneas que seleccione con ese botón desplegable.
Agradecería cualquier tipo de ayuda. Gracias

He encontrado un script internet pero no sé como adaptarlo a mis necesidades es el siguiente :

Cita:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>function cambiarDisplay</title>
</head>

<body>
<script>
function cambiarDisplay(id) {
if (!document.getElementById) return false;
fila = document.getElementById(id);
if (fila.style.display != "none") {
fila.style.display = "none"; //ocultar fila
} else {
fila.style.display = ""; //mostrar fila
}
}
</script>
<table>
<tr id="row1" onClick="cambiarDisplay('row2')">
<td><strong> Televisores de LCD, Pantalla de Cristal Líquido</strong> (Stock: 90 unidades ) </td>
</tr>
<tr id="row2" onClick="cambiarDisplay('row2')" style="display:none">
<td>Los Televisores de LCD brindan la más alta calidad de imágen dentro de la gama de modelos de pantallas planas, lo que los convierte en una excelente opción para los más exquisitos. </td>
</tr>
</table>
</body>

</html>

Gracias.

IsaBelM · #2 (**permalink**) 14/11/2011, 06:28

estudia este código, quizás lo veas más claro

linuxzero · #3 (**permalink**) 14/11/2011, 14:27

Si vas a incursionar en el javascript te recomiendo que te familiarices un poco con jQuery que la verdad te va a solucionar la vida, ya que es muy facil de escribir y de entender, y tiene funcionalidades como toggle() que se encargan de solucionarte ese tipo de cosas que queres hacer.

Si te interesa te dejo la url [URL="http://jquery.com"]http://jquery.com[/URL]. Aca este toda la documentacion necesaria.

Pero sinó con lo que aporto IsaBelM te tiene que funcionar perfectamente ;)

Saludos

putoquintana · #4 (**permalink**) 15/11/2011, 02:14

hola, y gracias de antemano.
Estoy intentando hacer lo que os comento con este script pero no me funciona, en principio los div deben de aparecer ocultos y cuando pulse el botón más que vayan apareciendo, pero no me funciona :

Código:

<html>
<head>
</head>
<body>

<script type="text/javascript">
 
var num_rows = 1;



for(var i=0; i<=2; i++) 
{
	document.getElementById("ARTICULO"+i).style.display = 'none';
}
 
function show_row(row_num) 
{ 
	var rows = document.getElementsByClassname('item'+row_num);

	for(i=0; i<rows.length; i++) 
		rows[i].style.display = 'block';

} 

function hide_row(row_num) 
{  
	var rows = document.getElementsByClassname('item'+row_num);

	for(i=0; i<rows.length; i++) 
		rows[i].style.display = 'none';

}

function add_row()
{
	if (num_rows >= 20)
		return;
	
	num_rows = num_rows + 1;
	
	show_row(num_rows);
}

function delete_row()
{
	if (num_rows <= 1) return;
	
	hide_row(num_rows);
	
	num_rows = num_rows - 1;
	
}
</script>


<img src="add.png" onclick="add_row()" />
<img src="delete.png" onclick="delete_row()" />

<div id="ARTICULO0" >PROD 1</div>
<div id="ARTICULO1" >PROD 2</div>
<div id="ARTICULO2" >PROD 3</div>

</body>
</html>

Agradecería cualquier tipo de ayuda. Gracias