Duda referente a que no se me repitan las filas en una tabla?

milomondo · #1 (**permalink**) 09/07/2012, 07:19

Buenas a todos, porfavor sepan disulparme por la forma tosca de preguntar: acabo de registrarme y aun no entiendo todo aqui.

El caso es que tengo una funcion de Javascript donde lo que ingreso en unos Arryas, aparece luego en diferentes celdas dentro de nuevas filas que aparecen en una tabla al hacer clik en un boton.
El problema es que cada vez que hago click se vuelven a repetir todos los datos de la tablas en nuevas filas que aparecen.
Yo quisiera, mas bien necesito, que aparescan de a una: asi luego cada vez que yo ingrese datos, estos aparescan en la tabla de a uno.

Alguien me puede decir que debo modificar para lograrlo?
El codigo es el siguiente:

<html>
<script language="javascript">

//unos arrays con unos datos ya ingresados
var nombres = new Array("a", "b", "c", "m", "s", "j");
var apellidos = new Array("perez", "fernandez", "lopez", "disney", "McCartney", "forlan");
var marcas = new Array(8,18,9,5,6,4)

function agregaFila(tableId){
var table = document.getElementById(tableId);

for(var i=0; i<nombres.length-i;i++){
var pos = table.rows.length;
var row = table.insertRow(pos);
var cell_0 = row.insertCell(0);
var cell_1 = row.insertCell(1);
var cell_2 = row.insertCell(2);
cell_0.style.border='solid 3px blue';
cell_0.innerHTML=nombres[i];
cell_1.style.border='solid 3px blue';
cell_1.innerHTML=apellidos[i];
cell_2.style.border='solid 3px blue';
cell_2.innerHTML=marcas[i];
}
}
</script>

//botón:

<P align="left"><button type="button" style="border: 0px" class="BTN_TRANS" , name="principal" id="aceptar" onClick="principal(); agregaFila('mitabla')" " "></button></p>

//tabla donde aparecen los datos:

<table id="mitabla">
<tr>
<td style="border: solid 4px blue;">Nombres</td>
<td style="border: solid 4px blue;">Apellidos</td>
<td style="border: solid 4px blue;">Marcas</td>
</tr>
</table>
</html>

Desde ya muchas gracias a cualquier ayuda, estoy medio corto de tiempo y esta funcion ya me tiene estresado. xD

maycolalvarez · #2 (**permalink**) 09/07/2012, 07:38

no entiendo, ¿que quieres hacer exactamente?, a que te refieres con que aparezcan de a una???

milomondo · #3 (**permalink**) 09/07/2012, 07:49

Supongo que no me explique bien, disculpa.
Mira, el codigo que tengo en realidad es asi:

<html>
<script language="javascript">
var nombres=new Array("carlos", "pedro", "alen", "maria", "luis", "julio")
var apellidos=new Array("perez", "geymonat", "lopez", "lugo", "obama", "forlan")
var notas=new Array(58,68,99,85,46,42)
function agregaFila(tableId)
{
var table = document.getElementById(tableId);
//Guardamos en una variable la cantidad de filas que tiene la tabla, esta variable
//tambien nos servira para indicar que la fila se tiene que insertar al final
//de la tabla.Es una ventaja que las posiciones empiecen en cero.
for(var i=0; i<nombres.length;i++){
var pos = table.rows.length;
var row = table.insertRow(pos);
var cell_0 = row.insertCell(0);
var cell_1 = row.insertCell(1);
var cell_2 = row.insertCell(2);
cell_0.style.border='solid 3px blue';
cell_0.innerHTML=nombres[i];
cell_1.style.border='solid 3px blue';
cell_1.innerHTML=apellidos[i];
cell_2.style.border='solid 3px blue';
cell_2.innerHTML=notas[i];
}
}

</script>

<input type="button" onclick="agregaFila('mitabla');" value="+" />
<input type="button" onclick="eliminaFila('mitabla');" value="-" />

<table id="mitabla">
<tr>
<td style="border: solid 4px blue;">Nombres</td>
<td style="border: solid 4px blue;">Apellidos</td>
<td style="border: solid 4px blue;">Notas</td>
</tr>
</table>
</html>

Quiero usarlo ahora, en otro caso, con arrays dinamicos donde un usuario ingrese los datos, y que asi me aparesca una fila que diga por ejemplo entonces "nombre-apellido-nota" de lo que se ingresó, luego al ingresar otro, lo mismo, y asi.

Pero cuando lo intento hacer aparecen repetidos: ingreso el nombre "a" y aparece, luego ingreso el nombre "b" y aparece una nueva fila que dice "a" y sus datos, y una tercera fila con "b". (y asi sucesivamente)

El problema supongo que esta en el for que va de 0 al largo siempre, entonces vuelve a tomar todos los nombres y los repite.

Necesito solucionar eso, alguien sabe como? (o al menos alguien me entendió? xD)

maycolalvarez · #4 (**permalink**) 09/07/2012, 08:57

¡Por favor!: usa el highlight para mostrar código

ése es el problema, que tienes un ciclo cuando no lo necesitas, si lo que quieres es que al darle click aparezca una fila sucesiva de ése array, lo que tienes que hacer es almacenar la posición actual (el cursor) en una variable local JS, de esa forma le incrementas al ejecutar la función y muestras la fila en cuestión.

IsaBelM · #5 (**permalink**) 09/07/2012, 15:23

la solución de maycol es acertada, aunque intento evitar en lo posible el uso de variables globales. para tal caso, se puede usar el método splice() y de ese modo siempre se puede solicitar el item 0

luis_vega · #6 (**permalink**) 10/07/2012, 05:41

Quita el bucle.
Eso es lo que hace que cada vez que llamas a "agregarFila" te añade tantas filas como elementos tiene el array "nombres".
Lo mas "facil", por requerir minimas modificaciones.
Quitar el bucle.

Y tras las linea:
var pos = table.rows.length;

Añade otra:
var i = pos - 1;

Y ya lo tienes.

milomondo · #7 (**permalink**) 14/07/2012, 15:55

Muchas gracias a todos por la ayuda! :)

Pude solucionarlo cambiando la funcion en la linea donde asigno un valor del array a la celda,
asi:
"cell_2.innerHTML=numeros[numeros.length -1];"