Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] obtener valores de tabla

Estas en el tema de obtener valores de tabla en el foro de Javascript en Foros del Web. Estoy generando una tabla a partir de un formulario (HTML). Cada vez que envio el form agrego una columna con id, nombre, 3 celdas con ...
  #1 (permalink)  
Antiguo 12/04/2016, 23:39
 
Fecha de Ingreso: marzo-2014
Mensajes: 41
Antigüedad: 10 años, 8 meses
Puntos: 0
obtener valores de tabla

Estoy generando una tabla a partir de un formulario (HTML).
Cada vez que envio el form agrego una columna con id, nombre, 3 celdas con enteros (inicialmente en 0), y otra mas para calcular el promedio de esas 3 celdas mediante el evento "onblur".

La duda que tengo es como obtener desde javascript el valor de la celda activada por el "onblur" y ademas de esto saber cuales son las otras dos que debo sumar para sacar el promedio, tomando en cuenta que van a ser varias filas generadas.

Nota: sin usar JQuery

Gracias por la ayuda
  #2 (permalink)  
Antiguo 12/04/2016, 23:53
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Respuesta: obtener valores de tabla

Hola:

Por lo que comentas debes programar el foco (onfocus), y ese foco sería común a todas las celdas, así que deberías programar todas esas celdas...

Desde una celda "td" tendrías que obtener el elemento padre ".parentNode" que sería la fila (tr)...

A Capella sería:

td.addEventListener("focus", proceso, false);

function proceso() {
celdas = this.parentNode.getElementsByTagName("td");
resultado = (parseInt(celda[2].innerHTML) +
parseInt(celda[3].innerHTML) +
parseInt(celda[4].innerHTML)) / 3;

procesar(resultado)
}

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 12/04/2016, 23:54
Avatar de Fernand0  
Fecha de Ingreso: septiembre-2005
Ubicación: Buenos Aires
Mensajes: 610
Antigüedad: 19 años, 2 meses
Puntos: 19
Respuesta: obtener valores de tabla

Ayudaria que des un ejemplo basico en HTML, asi se entiende bien la estructura de tu HTML.
Porque "celda", es.. al menos para mi, un <td>. Los TD no tienen evento blur. Ahora si con "celda" te referias a un <input type="text"/>, es otra cosa.

Pero YO no entiendo bien si no veo el codigo.
  #4 (permalink)  
Antiguo 13/04/2016, 00:07
 
Fecha de Ingreso: marzo-2014
Mensajes: 41
Antigüedad: 10 años, 8 meses
Puntos: 0
Respuesta: obtener valores de tabla

Gracias Caricatos, no conocia el parentNode, voy a intentar hacerlo asi.

Fernand0, aun no lo he hecho, pero ya lo comienzo y en un rato aviso si me funciono lo que menciona caricatos.
  #5 (permalink)  
Antiguo 13/04/2016, 00:18
Avatar de Fernand0  
Fecha de Ingreso: septiembre-2005
Ubicación: Buenos Aires
Mensajes: 610
Antigüedad: 19 años, 2 meses
Puntos: 19
Respuesta: obtener valores de tabla

Perdon, me olvidaba.. en tu HTML para poder tener focus o blur deberias utilizar el attribute tabindex en la etiqueta <td>, otra manera no conozco. Tal vez haya otra manera.
  #6 (permalink)  
Antiguo 13/04/2016, 01:04
 
Fecha de Ingreso: marzo-2014
Mensajes: 41
Antigüedad: 10 años, 8 meses
Puntos: 0
Respuesta: obtener valores de tabla

Si lo hacia como dijo caricatos tenia un error ya que decia que no podia hacer innerHTML de undefined entonces agregue eso que encontre en una pagina. Sin embargo me esta devolviendo como resultado NaN O.o

@Fernando te refieres a esto?: http://www.w3schools.com/jsref/prop_html_tabindex.asp


Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.  
  3.     <head>
  4.         <title>Examen 1</title>
  5.         <meta charset="UTF-8">
  6.         <link rel="shortcut icon" href="">
  7.         <script src="scripts.js" type="text/javascript"></script>
  8.     </head>
  9.     <body>
  10.         <div id="contents">
  11.             <div id="divForm">
  12.                 <form onsubmit="agregaFila(); return false;">
  13.                     <table>
  14.                         <tr>
  15.                             <td>iD: </td>
  16.                             <td><input type="text" id="inId"></td>
  17.                         </tr>
  18.                         <tr>
  19.                             <td>Apellido: </td>
  20.                             <td><input type="text" id="inApellido"></td>
  21.                         </tr>
  22.                         <tr>
  23.                             <td>Nombre: </td>
  24.                             <td><input type="text" id="inNombre"></td>
  25.                         </tr>
  26.                         <tr>
  27.                             <td colspan="2"><input type="submit" style="margin-left: 50px;" value="Enviar"> <input type="button" id="borrar" value="Borrar"></td>
  28.                         </tr>
  29.                     </table>
  30.                 </form>
  31.             </div>
  32.             <hr>
  33.             <div id="divTabla">
  34.                 <table id="tablaDatos">
  35.                     <tr>
  36.                         <td>ID</td>
  37.                         <td>Apellido</td>
  38.                         <td>Nombre</td>
  39.                         <td>Examen 1</td>
  40.                         <td>Examen 2</td>
  41.                         <td>Examen 3</td>
  42.                         <td>Promedio</td>
  43.                     </tr>
  44.                 </table>
  45.             </div>
  46.         </div>
  47.     </body>
  48. </html>


Código Javascript:
Ver original
  1. function agregaFila(){
  2.     var refTabla=document.getElementById("tablaDatos");
  3.    
  4.     obj=new Object();
  5.     obj.dato1=document.getElementById("inId").value;
  6.     obj.dato2=document.getElementById("inApellido").value;
  7.     obj.dato3=document.getElementById("inNombre").value;
  8.    
  9.    
  10.     var nuevaFila=refTabla.insertRow(-1);
  11.     var nuevaCelda;
  12.    
  13.     nuevaCelda=nuevaFila.insertCell(-1);
  14.     nuevaCelda.setAttribute("class","id")
  15.     nuevaCelda.innerHTML=obj.dato1;
  16.    
  17.     nuevaCelda=nuevaFila.insertCell(-1);
  18.     nuevaCelda.setAttribute("class","apellido")
  19.     nuevaCelda.innerHTML=obj.dato2;
  20.    
  21.     nuevaCelda=nuevaFila.insertCell(-1);
  22.     nuevaCelda.setAttribute("class","nombre")
  23.     nuevaCelda.innerHTML=obj.dato3;
  24.    
  25.     for(var i=0;i<3;i++){
  26.         nuevaCelda=nuevaFila.insertCell(-1);
  27.         nuevaCelda.setAttribute("class","nota")
  28.         nuevaCelda.innerHTML="<input type='text' value='0' onblur='calculaPromedio(this)'>";
  29.     }
  30.         nuevaCelda=nuevaFila.insertCell(-1);
  31.         nuevaCelda.setAttribute("class","nota")
  32.         nuevaCelda.innerHTML="<span>0</span>";
  33. }
  34.  
  35.  
  36. function calculaPromedio(nodo){
  37.     var nodoTd = nodo.parentNode; //Nodo TD
  38.     var nodoTr = nodoTd.parentNode; //Nodo TR
  39.     var celda = nodoTr.getElementsByTagName('td');
  40.    
  41.     var resultado = (parseInt(celda[3].innerHTML) + parseInt(celda[4].innerHTML) + parseInt(celda[5].innerHTML)) / 3;
  42.     celda[6].innerHTML="<span>"+resultado+"</span>";
  43.    
  44.    
  45. }
  #7 (permalink)  
Antiguo 13/04/2016, 03:27
Avatar de Fernand0  
Fecha de Ingreso: septiembre-2005
Ubicación: Buenos Aires
Mensajes: 610
Antigüedad: 19 años, 2 meses
Puntos: 19
Respuesta: obtener valores de tabla

Cita:
Iniciado por newb Ver Mensaje
Si, me referia a eso, porque vos hablabas de celdas, no de inputs. El input es normal que maneje onblur y onfocus, en cambio la celda no.
Cita:
Iniciado por Fernand0 Ver Mensaje
Ayudaria que des un ejemplo basico en HTML, asi se entiende bien la estructura de tu HTML.
Porque "celda", es.. al menos para mi, un <td>. Los TD no tienen evento blur. Ahora si con "celda" te referias a un <input type="text"/>, es otra cosa.

Pero YO no entiendo bien si no veo el codigo.
Bueno, aca ya aclare que, usando tabindex, se podria usar el onblur y onfocus. (aunque es medio.. sploit/ninja para mi gusto)
Cita:
Iniciado por Fernand0 Ver Mensaje
Perdon, me olvidaba.. en tu HTML para poder tener focus o blur deberias utilizar el attribute tabindex en la etiqueta <td>, otra manera no conozco. Tal vez haya otra manera.

Proba esto, a mi me anduvo.

Código Javascript:
Ver original
  1. function calculaPromedio(nodo){
  2.     var nodoTd = nodo.parentNode; //Nodo TD
  3.     var nodoTr = nodoTd.parentNode; //Nodo TR
  4.     var celda = nodoTr.getElementsByTagName('td');
  5.     var input = nodoTr.getElementsByTagName('input');
  6.    
  7.     var resultado = (parseInt(input[0].value) + parseInt(input[1].value) + parseInt(input[2].value)) / 3;
  8.     celda[6].innerHTML="<span>"+resultado+"</span>";
  9.    
  10. }

Última edición por Fernand0; 13/04/2016 a las 03:38 Razón: estoy re dormido
  #8 (permalink)  
Antiguo 13/04/2016, 11:21
 
Fecha de Ingreso: marzo-2014
Mensajes: 41
Antigüedad: 10 años, 8 meses
Puntos: 0
Respuesta: obtener valores de tabla

Excelente! con elementos de tipo input si me funciono!

Etiquetas: html, onblur, table
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:37.