capturar el valor de un input dentro de un while

[maximendez88]

Buenas, estoy teniendo un problemita que no estoy sabiendo resolver. El tema esta en que tengo una tabla dinámica que la estoy creando con javascript, hasta ahi esta todo bien. Creo la tabla normalmente, la tabla tiene que tener 5 columnas y un numero definido de filas, q lo define el usuario y dentro de cada columna hay un input para colocar texto. Para crear las filas utilizo un for, y para crear las columnas utilizo un while, hasta ahi funciona todo de maravilla. El problema es como capturo el value de cada input de cada columna que me crea con while, ya que me los crea con un id repetido. Dejo parte de mi código a ver si alguien me puede dar una mano...

Código Javascript:

for(i=0;i<cantalumnos;i++)
    {
    cantcolumnas=0;
    var rowinsertdatos=insertdatosinfo.insertRow(i);
        
    while(cantcolumnas<5)
    {
        cellalgo= rowinsertdatos.insertCell(cantcolumnas)
        cellalgo.innerHTML="<input type='text' id='dato' >"
        cellalgo.style.width="200px"
        cantcolumnas++;     
    }
 

[PHPeros]

Para evitar IDs repetidos puedes añadirle el valor de la variable en cada iteración:

Código Javascript:

cellalgo.innerHTML = "<input type='text' id='dato" + cantcolumnas + "'>";
 

Así quedaría:

dato0
dato1
dato2

[...]

[maximendez88]

muchas gracias por la respuesta, eso es una buena solución, el tema este en como capturo cada valor con javascript?

[PHPeros]

Si es solo para un elemento concreto lo que comenté antes estaría bien. Si es para todos, pues lo mejor será que les pongas una misma clase y los recorras todos con getElementsByClassName.

[maximendez88]

gracias por tu aporte... a ver si puedo explicar bien lo que quiero. A mi me gustaría crear una nueva tabla con los valores de todos los valores de los input de ese while....

[Alexis88]

Recorre a las cajas de texto contenidas en la tabla y ve tomando los valores que encuentres, los cuales puedes almacenar en una cadena o un array.

Código Javascript:

var valores = [];
 
[].forEach.call(document.querySelectorAll("table input"), function(input){
    valores.push(input.value);
});
 

Saludos

[maximendez88]

Iniciado por Alexis88

Recorre a las cajas de texto contenidas en la tabla y ve tomando los valores que encuentres, los cuales puedes almacenar en una cadena o un array.

Código Javascript:

var valores = [];
 
[].forEach.call(document.querySelectorAll("table input"), function(input){
    valores.push(input.value);
});
 

Saludos

he probado utilizar esta solución... pero no me devolvió nada... sigue todo igual

[Alexis88]

¿Y si nos muestras el código actualizado? Vamos, no podemos adivinar. Ayúdanos a ayudarte.

P.D.: Solo te di una idea. Debes de adaptarla a lo que necesitas, no limitarte a copiar y pegar.

[maximendez88]

cree una tabla nueva y le quise mandar los valores que tenia en la otra tabla con ese codigo... te dejo mas o menos como lo hice

Código Javascript:

var insertdatosinfo_def=document.getElementById('tbldatosdefinitivos');
    insertdatosinfo_def.border="1"
    
    var cantalumnos_def=document.getElementById('cantalumnos').value;
    cantcolumnas_def=0;
    var j=0;
    
    for(j=0;j<cantalumnos_def;j++)
    {
    cantcolumnas_def=0;
    var rowinsertdatos_def=insertdatosinfo_def.insertRow(j);
        
    while(cantcolumnas_def<5)
    {
        
    
        
        cellalgo_def= rowinsertdatos_def.insertCell(cantcolumnas_def)
        
        
 
    
    var valores = [];
 
[].forEach.call(document.querySelectorAll("table input"), function(input){
    valores.push(input.value);
});
 
        
        cellalgo_def.style.width="200px"
        cantcolumnas_def++;     
    }
    }
 

[Alexis88]

El problema está en que lo que te pasé afectará a todos los <input> contenidos en tablas, no solo a la primera. Tendrías que especificar de qué tabla deseas tomar los valores, pudiendo usar para ello su id.

Código Javascript:

document.querySelectorAll("#id de la primera tabla input")
 

Además, eso debes de hacerlo antes de crear la segunda tabla. Una vez que hayas creado la segunda, como se supone que ambas tablas tienen la misma cantidad de <input>, solo tendrías que recorrer ya sea al conjunto de <input> de la segunda tabla o al array con los valores de los <input> de la primera tabla e ir asignándolos.

Código Javascript:

var id = "#El id de la segunda tabla",
    inputs = document.querySelectorAll(id + " input"),
    total = inputs.length; //El total de <input> de la segunda tabla
 
for (var i = 0; i < total; i++){
    inputs[i].value = valores[i];
}
 

Recuerda, es solo una idea. Tienes que adaptarla a lo que necesitas.

Saludos

[maximendez88]

muchas gracias por intentar ayudarme... esto fue lo que hice... pero igual sigue sin traerme resultados, la segunda tabla se crea todo bien y todo... pero no me vienen los resultados de los value que escribi en la primera.... lo hice asi...

Código Javascript:

document.querySelectorAll("tbldatosinfo")   
    
    var insertdatosinfo_def=document.getElementById('tbldatosdefinitivos');
    insertdatosinfo_def.border="1"
    
    var cantalumnos_def=document.getElementById('cantalumnos').value;
    cantcolumnas_def=0;
    var j=0;
    
    for(j=0;j<cantalumnos_def;j++)
    {
    cantcolumnas_def=0;
    var rowinsertdatos_def=insertdatosinfo_def.insertRow(j);
        
    while(cantcolumnas_def<5)
    {
        
    cellalgo_def= rowinsertdatos_def.insertCell(cantcolumnas_def)
        
    var id = 'tbldatosdefinitivos',
    inputs = document.querySelectorAll(id + " input"),
    total = inputs.length; //El total de <input> de la segunda tabla
 
for (var i = 0; i < total; i++){
    inputs[i].value = valores[i];
}
        
        cellalgo_def.style.width="200px"
        cantcolumnas_def++;     
    }
    }
 

[Alexis88]

¿Por qué le quitaste el # al id como te lo indiqué y en dónde llenas de valores al array?

Por la primera línea del código que muestras, parece que no analizaste lo que te dije. Esa parte debe de quedar así:

Código Javascript:

var valores = [];
[].forEach.call(document.querySelectorAll("#tbldatosinfo input"), function(input){
    valores.push(input.value);
});
 

[maximendez88]

Iniciado por Alexis88

¿Por qué le quitaste el # al id como te lo indiqué y en dónde llenas de valores al array?

Por la primera línea del código que muestras, parece que no analizaste lo que te dije. Esa parte debe de quedar así:

Código Javascript:

var valores = [];
[].forEach.call(document.querySelectorAll("#tbldatosinfo input"), function(input){
    valores.push(input.value);
});
 

perdón... lo escribi así porque lo copie y lo pegue pero ya había probado con el signo anteriormente






copio de nuevo

Código Javascript:

document.querySelectorAll("#tbldatosinfo")  
    
    
    
    var insertdatosinfo_def=document.getElementById('tbldatosdefinitivos');
    insertdatosinfo_def.border="1"
    
    var cantalumnos_def=document.getElementById('cantalumnos').value;
    cantcolumnas_def=0;
    var j=0;
    
    for(j=0;j<cantalumnos_def;j++)
    {
    cantcolumnas_def=0;
    var rowinsertdatos_def=insertdatosinfo_def.insertRow(j);
        
    while(cantcolumnas_def<5)
    {
        
    
        
        cellalgo_def= rowinsertdatos_def.insertCell(cantcolumnas_def)
        
        
      
    
        var valores = [];
[].forEach.call(document.querySelectorAll("#tbldatosinfo input"), function(input){
    valores.push(input.value);
});
        
        
        cellalgo_def.style.width="200px"
        cantcolumnas_def++;     
    }
    }
 

[Alexis88]

Solo para dejar las cosas claras, los métodos .querySelector() y .querySelectorAll(), utilizan selectores CSS, por eso utilizo símbolos como el # o el punto, entre otros, para seleccionar elementos del documento.

[maximendez88]

Iniciado por Alexis88

Solo para dejar las cosas claras, los métodos .querySelector() y .querySelectorAll(), utilizan selectores CSS, por eso utilizo símbolos como el # o el punto, entre otros, para seleccionar elementos del documento.

si.. lo tengo claro... solo me equivoque al copiar el código... de hecho me quedo asi... pero aun sigue sin funcionar.... no me trae nada...a la segunda tabla...

Código Javascript:

document.querySelectorAll("#tbldatosinfo")  
    var insertdatosinfo_def=document.getElementById('tbldatosdefinitivos');
    insertdatosinfo_def.border="1"
    var cantalumnos_def=document.getElementById('cantalumnos').value;
    cantcolumnas_def=0;
    var j=0;
    
    for(j=0;j<cantalumnos_def;j++)
    {
    cantcolumnas_def=0;
    var rowinsertdatos_def=insertdatosinfo_def.insertRow(j);
        
    while(cantcolumnas_def<5)
    {
                
        cellalgo_def= rowinsertdatos_def.insertCell(cantcolumnas_def)   
        var valores = [];
[].forEach.call(document.querySelectorAll("#tbldatosinfo input"), function(input){
    valores.push(input.value);
});
        cellalgo_def.style.width="200px"
        cantcolumnas_def++;     
    }
    }
 

[Alexis88]

¿Por qué tomas los valores dentro del bucle while?

El orden debe de ser el siguiente:

1. Tomas los valores de los <input> de la primera tabla.
2. Creas la segunda tabla, le añades los <input>.
3. Asignas a los <input> de la segunda tabla los valores guardados de los <input> de la primera tabla.

[maximendez88]

Iniciado por Alexis88

¿Por qué tomas los valores dentro del bucle while?

El orden debe de ser el siguiente:

1. Tomas los valores de los <input> de la primera tabla.
2. Creas la segunda tabla, le añades los <input>.
3. Asignas a los <input> de la segunda tabla los valores guardados de los <input> de la primera tabla.

los pongo dentro del while para que se vayan insertando en cada celda que crea ese while...

[Alexis88]

Pero haces mal porque tomas todos los valores en cada iteración del bucle while, lo cual es innecesario e ineficiente, además, nunca insertas los valores recuperados en los <input> de la nueva tabla. Mejor hazlo en orden.

Vuelve a leer con calma todo lo que te he venido diciendo para que no sigas cometiendo más errores básicos.

[maximendez88]

buenas, haciendo un debug.... de la función... me muestra los datos solo del primer input... como puedo hacer para que se escriba cada valor en cada celda??
mi codigo quedo asi al final...

Código Javascript:

function copiarvalores()
{
    
    
    
    
    var insertdatosinfo_def=document.getElementById('tbldatosdefinitivos');
    insertdatosinfo_def.border="1"
    var cantalumnos_def=document.getElementById('cantalumnos').value;
    cantcolumnas_def=0;
    var j=0;
    
    for(j=0;j<cantalumnos_def;j++)
    {
    cantcolumnas_def=0;
    var rowinsertdatos_def=insertdatosinfo_def.insertRow(j);
        
    while(cantcolumnas_def<5)
    {
                
        cellalgo_def= rowinsertdatos_def.insertCell(cantcolumnas_def)   
        cellalgo_def.style.width="200px"
        cellalgo_def.style.height="20px"    
        
            var valores = [];
[].forEach.call(document.querySelectorAll("#tbldatosinfo input"), function(input){
    cellalgo_def.innerHTML=(input.value);
    
    
    
});
        
        
        cantcolumnas_def++;     
    
    }
    }
    
    
    
    
    
 
 
}
 

[Alexis88]

Y sigues cometiendo errores básicos.

Estás asignando los valores de los <input> de la primera tabla a la celda actual en el bucle de la segunda tabla, reemplazando al anterior con cada iteración del método forEach y, para colmo, tienes al array valores de adorno. Por eso fue que te dije que lo hagas parte por parte, para evitar que cometas errores como estos.

Por favor, analiza con calma lo que haces.

[maximendez88]

Iniciado por Alexis88

Y sigues cometiendo errores básicos.

Estás asignando los valores de los <input> de la primera tabla a la celda actual en el bucle de la segunda tabla, reemplazando al anterior con cada iteración del método forEach y, para colmo, tienes al array valores de adorno. Por eso fue que te dije que lo hagas parte por parte, para evitar que cometas errores como estos.

Por favor, analiza con calma lo que haces.

lo estoy haciendo parte por parte, el tema es que yo quiero que en cada celda me quede un valor diferente..... y necesito que si o si sean 5 columnas por eso el while.....
y si le quito el array valores, me da un error

[Alexis88]

Está bien que uses el bucle while para crear las cinco columnas por fila, el caso es que no estás entendiendo que antes de siquiera empezar a crear la segunda tabla, debes de tomar los valores de los <input> de la primera tabla y una vez que hayas terminado de crear la segunda tabla, puedes añadir los valores almacenados en el array dentro de cada celda de la nueva tabla, para lo cual tendrías que usar otro bucle.

Lo que pretendes hacer no es difícil, pero te complicas por querer hacerlo todo junto.

[maximendez88]

tomar los valores ya los tomo asi.... pero lo que no estoy sabiendo como hacer es como mostrarlos....despues... llegue a esto.... y ahi tengo cargado el array....valores

Código Javascript:

var valores = [];
    [].forEach.call(document.querySelectorAll("#tbldatosinfo input"), function(input){
    valores.push(input.value);});
 
 
    var insertdatosinfo_def=document.getElementById('tbldatosdefinitivos');
    insertdatosinfo_def.border="1"
    var cantalumnos_def=document.getElementById('cantalumnos').value;
    cantcolumnas_def=0;
    var j=0;
    
    for(j=0;j<cantalumnos_def;j++)
    {
    cantcolumnas_def=0;
    var rowinsertdatos_def=insertdatosinfo_def.insertRow(j);
        
    while(cantcolumnas_def<5)
    {
                
        cellalgo_def= rowinsertdatos_def.insertCell(cantcolumnas_def)   
        cellalgo_def.style.width="200px"
        cellalgo_def.style.height="20px"    
        
        
        
        cantcolumnas_def++;     
    
    }
        
    }
 

[maximendez88]

tengo cargado el array valores, pero no estoy sabiendo mostrarlo, ya que si lo pongo dentro del while, me repite el ultimo valor en cada celda

[Alexis88]

Luego de eso, debes de usar un bucle que recorra al total de celdas de la segunda tabla (que previamente deberás de tomar) y, en cada iteración, asignas cada valor del array a cada celda. Solo basta con usar un bucle y no dos ya que debe de haber la misma cantidad de celdas que de valores en el array.

Hice un ejemplo para que lo puedas ver mejor. Ingresa valores a las cajas de texto y luego pulsa el botón.

Saludos