Llamar datos dinamicos en un input

[karenlorenadg]

Hola a todos, tengo una gran duda y quisiera que me ayudaran por favor, No tengo idea de cómo se hace. Tengo dos tablas, en una tengo una serie de numeros y un promedio al final, es una tabla de notas estudiantes. En la otra tabla tengo los logros. Quiero que por medio de una condicional, es decir, que segun la nota del estudiante, al darle el promedio final el sistema me arroje inmediatamente en ese campo vacio el logro que le pertenece segun su nota. Me explico mejor, por filas se guardan 4 logros que van segun el resultado del estudiantes, logro1, posee un logo positivo, el logro2 posee un logo negativo, el logro3 prosee un logro intermedio y el logro4 posee un logro superior. Entonces lo que quiero es que a la hora de ingresarle las notas, el sistema me llene el campo vacío que llama a la tabla logro, segun su nota uno de los 4 logros, que despues al darle guardar me guarde dicho logro en la tabla notas. Espero haberme explicado bien.

Bendiciones y agradezco cualquier ayudita o indicio que me puedan dar. Feliz Navidad a todos

[ArturoGallegos]

eso lo puedes lograr con Vue, Angular o React los 3 son muy buenos aunque si tiene su curva de aprendizaje.

Si nunca los has manejado te recomiendo empezar con Vue que hasta el mismisimo google lo utiliza en su buscador., a mi ver es el que tiene la curva de aprendizaje mas corta.

Suerte!

[Alexis88]

Por lo que explicas, solo te bastarían algunas condiciones para realizar las asignaciones respectivas. Solo haría falta ver cómo lo estás haciendo en código para indicarte exactamente qué añadir y en dónde.

[alvaro_trewhela]

Según veo no es necesario usar js, simplemente cargar completamente la página.

Pero acá un posible js para lo que pides, y dime que te parece...

Código Javascript:

var achvs = [[3, "Logro 1"],[5, "Logro 2"], [7, "Logro 3"], "Logro 4"]; //el numerito que acompaña es el valor max. del rango del logro.
 
function achievements(id, id2){
var table = document.getElementById(id);
var table2 = document.getElementById(id2);
 
var rows = table.getElementsByTagName("tr");
 
    for(var k=1; k<rows.length; k++){
    var cols = rows[k].getElementsByTagName("td");
    var prom = 0;
    var student = cols[0].innerHTML;
        for(var n=1; n<cols.length-1; n++){
        prom += parseInt(cols[n].innerHTML);
        }
    prom /= 4;
    cols[cols.length-1].innerHTML = prom;
    
    var nRow = document.createElement("tr");
    var nCol1 = document.createElement("td");
    var nCol2 = document.createElement("td");
    
    var ach = achvs[achvs.length-1];
        for(var n=0; n<achvs.length; n++){
            if(prom <= achvs[n][0]){
            ach = achvs[n][1];
            break;
            }
        }
    
    nCol1.innerHTML = student;
    nCol2.innerHTML = ach;
    
    nRow.appendChild(nCol1);
    nRow.appendChild(nCol2);
    
    table2.appendChild(nRow);
    }
 
    
}
 

Código HTML:

<table id="table">
    <tr>
        <td>Alumno</td>
        <td>Nota 1</td>
        <td>Nota 2</td>
        <td>Nota 3</td>
        <td>Nota 4</td>
        <td>Promedio</td>
    </tr>
    <tr>
        <td>Juan</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>4</td>
        <td></td>
    </tr>
        <tr>
        <td>Catalina</td>
        <td>10</td>
        <td>9</td>
        <td>7</td>
        <td>2</td>
        <td></td>
    </tr>
        <tr>
        <td>Cristobal</td>
        <td>7</td>
        <td>6</td>
        <td>2</td>
        <td>8</td>
        <td></td>
    </tr>
</table>
 
<table id="table2">
<tr>
<td>Alumno</td>
<td>Logros</td>
</tr>
 
</table>
 
<input value="Cargar logros" type="button" onclick="achievements('table', 'table2');" />
 

Saludos, espero sirva.

[karenlorenadg]

Hola alvaro_trewhela

Hola, tu ejemplo me parece bien, toca estudiarlo, se ve muy viable, La pregunta mía es. En la parte superior donde estan los logros, no son constantes, son llamados desde una tabla logros previamente registrados, ¿Cómo hago para llamarlos dinamicamente?

[alvaro_trewhela]

Emmm puedes o usar ajax y cambiar la var. achvs o generar un elemento html escondido con algun patron y obtener los datos, algo así

Código HTML:

<div id="table3" style="display:none;">3-Logro 1;5-Logo 2;7-Logro 3;Logro 4</div>
 

Y metes esto dentro de la función que te dí pero al principio

Código Javascript:

var achvs = [];
var cAchv = document.getElementById(id3).innerHTML.split(";");
 
    for(var k=0;k<cAchv.length-1;k++){
    var data = cAchv[k].split("-");
    achvs[k][0] = parseInt(data[0]);
    achvs[k][1] = data[1];
    }
 
achvs[achvs.length] = cAchv[cAchv.length];
 

Quitas esto

Código Javascript:

var achvs = [[3, "Logro 1"],[5, "Logro 2"], [7, "Logro 3"], "Logro 4"]; //el numerito que acompaña es el valor max. del rango del logro.
 

A la funcion le agregas otro parametro

Código Javascript:

function achievements(id, id2, id3)
 

Y al evento le pones

Código HTML:

onclick="achievements('table', 'table2', 'table3');"
 

[karenlorenadg]

Disculpa, antes que me respondieras hice esto y me funciona muy bien, pero tengo dos inconvenientes. Primero te paso el codigo

Código PHP:

<script>
        
        <?php
             include('conexion.php'); 
             $query = "SELECT * FROM table_logros";
             $result = mysql_query($query); 
 
              while ($registro = mysql_fetch_array($result)){ 
 
              echo "
                                    
              
                                    
             
        
        
    var achvs = [[3, '".$registro['logro_1_pos']."'],[1, '".$registro['logro_2_neg']."'], [4, '".$registro['logro_3_inter']."'],  '".$registro['logro_4_sup']."']; //el numerito que acompaña es el valor max. del rango del logro.
  
function achievements(id, id2){
var table = document.getElementById(id);
var table2 = document.getElementById(id2);
 
var rows = table.getElementsByTagName('tr');
 
    for(var k=1; k<rows.length; k++){
    var cols = rows[k].getElementsByTagName('td');
    var prom = 0;
    var student = cols[0].innerHTML;
        for(var n=1; n<cols.length-1; n++){
        prom += parseInt(cols[n].innerHTML);
        }
    prom /= 4;
    cols[cols.length-1].innerHTML = prom;
    
    var nRow = document.createElement('tr');
    var nCol1 = document.createElement('td');
    var nCol2 = document.createElement('td');
    
    var ach = achvs[achvs.length-1];
        for(var n=0; n<achvs.length; n++){
            if(prom <= achvs[n][0]){
            ach = achvs[n][1];
            break;
            }
        }
    
    nCol1.innerHTML = student;
    nCol2.innerHTML = ach;
    
    nRow.appendChild(nCol1);
    nRow.appendChild(nCol2);
    
    table2.appendChild(nRow);
    }
 
    
}    
 
    ";
              }
              ?>
    </script>
 

Los inconvenientes que tengo son:

1. No me llama los logros cuando le indico que me llame solo los de cierta categoria es decir, de la asignatura en mencion a la cual se está calificando al estudiantes. yo pongo en la consulta asi:

"SELECT * FROM table_logros where asignatura_id=".$_GET['asignatura_id']."; pero se queda sin accionar.

2. Quiero ponerle cierto rango a las notas, es decir que si el estudiante saca menos de 3 me muestre el logro negativo,, si el estudiante saca mayor que 3 y menos que 3,5 me muestre un logro positivo, que si saca mayor de 3,5 a 4,5 me saque el promedio intermedio y si es = 5 que me saque el promedio Superior

[karenlorenadg]

Tambien quiero que el logro me cargue en un campo de texto para que luego sea guardado en un registro