[SOLUCIONADO] obtener valores de tabla

newb · #1 (**permalink**) 12/04/2016, 23:39

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

caricatos · #2 (**permalink**) 12/04/2016, 23:53

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

Fernand0 · #3 (**permalink**) 12/04/2016, 23:54

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.

newb · #4 (**permalink**) 13/04/2016, 00:07

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.

Fernand0 · #5 (**permalink**) 13/04/2016, 00:18

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.

newb · #6 (**permalink**) 13/04/2016, 01:04

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<!DOCTYPE html>
 
<html>
    <head>
        <title>Examen 1</title>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="">
        <script src="scripts.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="contents">
            <div id="divForm">
                <form onsubmit="agregaFila(); return false;">
                    <table>
                        <tr>
                            <td>iD: </td>
                            <td><input type="text" id="inId"></td>
                        </tr>
                        <tr>
                            <td>Apellido: </td>
                            <td><input type="text" id="inApellido"></td>
                        </tr>
                        <tr>
                            <td>Nombre: </td>
                            <td><input type="text" id="inNombre"></td>
                        </tr>
                        <tr>
                            <td colspan="2"><input type="submit" style="margin-left: 50px;" value="Enviar"> <input type="button" id="borrar" value="Borrar"></td>
                        </tr>
                    </table>
                </form>
            </div>
            <hr>
            <div id="divTabla">
                <table id="tablaDatos">
                    <tr>
                        <td>ID</td>
                        <td>Apellido</td>
                        <td>Nombre</td>
                        <td>Examen 1</td>
                        <td>Examen 2</td>
                        <td>Examen 3</td>
                        <td>Promedio</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>

Código Javascript:

Ver originalfunction agregaFila(){
    var refTabla=document.getElementById("tablaDatos");
    
    obj=new Object();
    obj.dato1=document.getElementById("inId").value;
    obj.dato2=document.getElementById("inApellido").value;
    obj.dato3=document.getElementById("inNombre").value;
    
    
    var nuevaFila=refTabla.insertRow(-1);
    var nuevaCelda;
    
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.setAttribute("class","id")
    nuevaCelda.innerHTML=obj.dato1;
    
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.setAttribute("class","apellido")
    nuevaCelda.innerHTML=obj.dato2;
    
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.setAttribute("class","nombre")
    nuevaCelda.innerHTML=obj.dato3;
    
    for(var i=0;i<3;i++){
        nuevaCelda=nuevaFila.insertCell(-1);
        nuevaCelda.setAttribute("class","nota")
        nuevaCelda.innerHTML="<input type='text' value='0' onblur='calculaPromedio(this)'>";
    }
        nuevaCelda=nuevaFila.insertCell(-1);
        nuevaCelda.setAttribute("class","nota")
        nuevaCelda.innerHTML="<span>0</span>";
}
 
 
function calculaPromedio(nodo){
    var nodoTd = nodo.parentNode; //Nodo TD
    var nodoTr = nodoTd.parentNode; //Nodo TR
    var celda = nodoTr.getElementsByTagName('td');
    
    var resultado = (parseInt(celda[3].innerHTML) + parseInt(celda[4].innerHTML) + parseInt(celda[5].innerHTML)) / 3;
    celda[6].innerHTML="<span>"+resultado+"</span>";
    
    
}

Fernand0 · #7 (**permalink**) 13/04/2016, 03:27

Cita:

Iniciado por newb

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

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

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

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 originalfunction calculaPromedio(nodo){
    var nodoTd = nodo.parentNode; //Nodo TD
    var nodoTr = nodoTd.parentNode; //Nodo TR
    var celda = nodoTr.getElementsByTagName('td');
    var input = nodoTr.getElementsByTagName('input');
    
    var resultado = (parseInt(input[0].value) + parseInt(input[1].value) + parseInt(input[2].value)) / 3;
    celda[6].innerHTML="<span>"+resultado+"</span>";
    
}

newb · #8 (**permalink**) 13/04/2016, 11:21

Excelente! con elementos de tipo input si me funciono!