0

Estoy armando una tabla que reciba datos desde un modal, con dos selectores y un input. La tarea hasta ahí es fácil. Logré que el modal cargara las notas en la celda correspondiente. Ahora, no sé como realizar la tarea de poner el promedio en la última columna de la tabla. No se si se puede usando sólo javascript o es más cómodo jquery.

No soy capaz de poder tomar los valores agregados a cada celda para luego realizar la operación de promedio.

function submitgrade(){
    var nramo = document.getElementById("ramo").value;
    var nnota = document.getElementById("nota").value;
    var valornota = parseInt(document.getElementById("grade").value);
    var verificador = nramo + nnota;
    document.getElementById(verificador).innerHTML = valornota;
}
   <!--tabla-->
   <section class="container pt-5 pb-5">
    <table class="table table-striped table-responsive mt-5">
        <thead>
            <tr>
                <th scope="col">Ramo</th>
                <th scope="col">Nota 1</th>
                <th scope="col">Nota 2</th>
                <th scope="col">Nota 3</th>
                <th scope="col">Promedio</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td scope="row">HTML</td>
                    <td id="ramo1nota1"></td>
                    <td id="ramo1nota2"></td>
                    <td id="ramo1nota3"></td>
                    <td id="ramo1promedio"></td>
                </tr>
                <tr>
                    <td scope="row">CSS</td>
                    <td id="ramo2nota1"></td>
                    <td id="ramo2nota2"></td>
                    <td id="ramo2nota3"></td>
                    <td id="ramo2promedio"></td>
                </tr>
                <tr>
                    <td scope="row">JavaScript</td>
                    <td id="ramo3nota1"></td>
                    <td id="ramo3nota2"></td>
                    <td id="ramo3nota3"></td>
                    <td id="ramo3promedio"></td>
                </tr>
            </tbody>
    </table>
   </section>
    
  </body>
</html>
6
  • Es posible que falte algunos códigos. No existe la ID verificador en la cual quieres escribir valornota. Es posible que esta línea: document.getElementById(verificador).innerHTML = valornota; este mal Commented el 28 jul. 2022 a las 0:06
  • donde llamas a submitgrade()?? pon un ejemplo minimo de tu funcion y que deseas hacer y el resultado esperado...
    – Bryro
    Commented el 28 jul. 2022 a las 2:47
  • @NarcisoAifuz verificador no es un ID es una variable. No está explicitado pero tengo un modal donde las opciones para seleccionar ramo y nota están valorizados y la tabla que recepciona la nota, cada <td> está individualizado con un ID que corresponde a la mezcla de "ramo1, 2, 3" y "nota1, 2, 3". He logrado poder hacer que el input cargue las notas sin problemas en la tabla. Mas no se como promediar Commented el 28 jul. 2022 a las 14:36
  • @Bryro desde un modal que no está explicitado en el código Commented el 28 jul. 2022 a las 14:37
  • @RogelioBontá en todo caso debes poner un ejemplo minimo verificable es decir debes llenar tus td manualamente colocar el codigo y decir cual es el resultado esperado...
    – Bryro
    Commented el 28 jul. 2022 a las 17:48

1 respuesta 1

0

Puedes agregar un identificador a cada fila de la tabla y recorrer con un for para realizar la suma, aplicando una condición para que no tome la primera casilla no la ultim

// Selectores
let filaUno = document.querySelector("#fila1")
let filaDos = document.querySelector("#fila2")
let filaTres = document.querySelector("#fila3")
let filaCuatro = document.querySelector("#fila4")
let acumulador = 0;
let promedio = 0;

// Listamos todos los hijos de la fila
let valoresFila = filaUno.children;

//Recorremos la lista de hijos
for(let i = 0; i < valoresFila.length; i++){
    
    // Realizamos condicional para que no tome la primera y la ultima casilla
    if(i > 0 && i < 4){
        // sumamos cada valor
        acumulador += parseInt(valoresFila[i].innerText);
    }
}

// calculamos el promedio
promedio = acumulador/3;

// Pasamos el valor al html
valoresFila[4].innerText=promedio
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td{
            margin: 5px;
            border: 1px solid;
            text-align: center;
        }
    </style>
</head>
<body>
    <section class="container pt-5 pb-5">
        <table class="table table-striped table-responsive mt-5">
            <thead>
                <tr>
                    <th scope="col">Ramo</th>
                    <th scope="col">Nota 1</th>
                    <th scope="col">Nota 2</th>
                    <th scope="col">Nota 3</th>
                    <th scope="col">Promedio</th>
                </tr>
                </thead>
                <tbody>
                    <tr id="fila1">
                        <td scope="row">HTML</td>
                        <td id="ramo1nota1">80</td>
                        <td id="ramo1nota2">20</td>
                        <td id="ramo1nota3">45</td>
                        <td id="ramo1promedio"></td>
                    </tr>
                    <tr id="fila2">
                        <td scope="row">CSS</td>
                        <td id="ramo2nota1">55</td>
                        <td id="ramo2nota2">32</td>
                        <td id="ramo2nota3">78</td>
                        <td id="ramo2promedio"></td>
                    </tr>
                    <tr id="fila3">
                        <td scope="row">JavaScript</td>
                        <td id="ramo3nota1">22</td>
                        <td id="ramo3nota2">47</td>
                        <td id="ramo3nota3">63</td>
                        <td id="ramo3promedio"></td>
                    </tr>
                </tbody>
        </table>
       </section>
    
    <script src="./main.js"></script>
</body>
</html>

a que son la del los labels y el resultado, te comparto un ejemplo, espero te sea de ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.