Tenemos que construir un sitio web donde pueda cargar los datos de su estudiante como su nombre, calificaciones en diferentes materias. Y después de cargarlo, insertará los datos del estudiante en la tabla y mostrará las calificaciones totales, el promedio y el estado de aprobación/reprobación. La implementación se realiza mediante HTML y JavaScript .
Acercarse:
- Al principio, tenemos que crear algunas filas y columnas para el nombre y las puntuaciones de las materias. De nuevo, las puntuaciones de las materias se dividirán en cuatro columnas. Hay cuatro nombres de sujetos que se mostrarán. Los usuarios pueden ingresar los detalles con un clic en el botón para «Agregar a la tabla».
- Habrá otra tabla Datos del estudiante con cuatro columnas Nombre, Total, Promedio, Aprobado o Reprobado.
- Por cada dato ingresado, se agregará una fila a la tabla de puntaje, mostrando el puntaje total del estudiante, el promedio y el estado de aprobado o reprobado. Si la puntuación media es superior a 70, el estado es «aprobado»; de lo contrario, el estado es «suspenso».
- Si introducimos otro dato se almacenará en la tabla.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body bgcolor="lightblue">
<center>
<table border="1" cellspacing="5" bgcolor="white">
<caption><b>Input Marks</b></caption>
<tr>
<th rowspan="2">Name</th>
<th colspan="4">Score</th>
</tr>
<tr>
<th>Hindi</th>
<th>English</th>
<th>Math</th>
<th>C Programming</th>
</tr>
<tr>
<td><input type="text" id="aname"></td>
<td><input type="text" id="am"></td>
<td><input type="text" id="aj"></td>
<td><input type="text" id="ad"></td>
<td><input type="text" id="an"></td>
</tr>
<tr>
<th colspan="5" height="30">
<input type="submit" value="Add To Table" onclick="Sub()"></th>
</tr>
</table>
<br>
<table border="1" cellspacing="5" bgcolor="white"
height="100" width="500" cellpadding="5" id="TableScore">
<caption><b>Student Data</b></caption>
<tr>
<th width="180">Name</th>
<th>Total</th>
<th>Average</th>
<th>Pass Or Fail</th>
</tr>
</table>
</center>
<script type="text/javascript">
function Sub(){
var n, k, r, e, v, sum, avg;
n=(document.getElementById('aname').value);
k=parseFloat(document.getElementById('am').value);
r=parseFloat(document.getElementById('aj').value);
e=parseFloat(document.getElementById('ad').value);
v=parseFloat(document.getElementById('an').value);
// Calculating Total
sum=k+r+e+v;
avg=sum/4;
// Display on Student Data
var newTable = document.getElementById('TableScore');
var row = newTable.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(0);
var cell3 = row.insertCell(0);
var cell4 = row.insertCell(0);
cell4.innerHTML= n;
cell3.innerHTML=sum;
cell2.innerHTML = avg;
if(avg>=70){
cell1.innerHTML="<font color=green>Pass</font>";
}else{
cell1.innerHTML="<font color=red>Fail</font>";
}
}
</script>
</body>
</html>
Producción:
Estado de aprobado o reprobado de los estudiantes
Publicación traducida automáticamente
Artículo escrito por sounetraghosal2000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA