guibranco/somaNotas.php

## somaNotas.php
<html>
<body>
<script>
function getElements(tipo, linha){
  return document.querySelectorAll("input[id^='" + tipo + "-" + linha + "-']");
}
function soma(campos, media){
  let soma = 0;
  for(let i = 0; i < campos.length; i++){
    const valor = campos[i].value * 1;
    if(valor >= 0 && valor < 11)
      soma += campos[i].value * 1;
  }
  return media ? soma / campos.length : soma;
}
function somaAts(linha) {
  document.getElementById("nt-" +  linha + "-1").value = soma(getElements("at",linha), false);
}
function somaNts(linha){
  document.getElementById("mb-" +  linha).value = soma(getElements("nt", linha), true);
}
function monitoraEventos(linha){
  getElements("at",linha).forEach(elem => elem.addEventListener("change",function() { somaAts(linha); }));
  document.getElementById("nt-" + linha + "-2").addEventListener("change", function(){ somaNts(linha); });
}
</script>
<?php
foreach($linha => $i=>$valores){
?>
  <form>
    <input id="at-<?php echo $i; ?>-1" type="number" min="0" max="10">
    <input id="at-<?php echo $i; ?>-2" type="number" min="0" max="10">
    <input id="at-<?php echo $i; ?>-3" type="number" min="0" max="10">
    <input id="at-<?php echo $i; ?>-4" type="number" min="0" max="10">
    <input id="at-<?php echo $i; ?>-5" type="number" min="0" max="10">
    <input id="nt-<?php echo $i; ?>-1" readonly><br>
    <input id="nt-<?php echo $i; ?>-2" type="number" min="0" max="10"><br>
    <input id="mb-<?php echo $i; ?>" readonly><br>
    <script>monitoraEventos(<?php echo $i; ?>);</script>
  </form>
<?php } ?>
</body>
</html>
	<html>
	<body>
	<script>
	function getElements(tipo, linha){
	return document.querySelectorAll("input[id^='" + tipo + "-" + linha + "-']");
	}
	function soma(campos, media){
	let soma = 0;
	for(let i = 0; i < campos.length; i++){
	const valor = campos[i].value * 1;
	if(valor >= 0 && valor < 11)
	soma += campos[i].value * 1;
	}
	return media ? soma / campos.length : soma;
	}
	function somaAts(linha) {
	document.getElementById("nt-" + linha + "-1").value = soma(getElements("at",linha), false);
	}
	function somaNts(linha){
	document.getElementById("mb-" + linha).value = soma(getElements("nt", linha), true);
	}
	function monitoraEventos(linha){
	getElements("at",linha).forEach(elem => elem.addEventListener("change",function() { somaAts(linha); }));
	document.getElementById("nt-" + linha + "-2").addEventListener("change", function(){ somaNts(linha); });
	}
	</script>
	<?php
	foreach($linha => $i=>$valores){
	?>
	<form>
	<input id="at-<?php echo $i; ?>-1" type="number" min="0" max="10">
	<input id="at-<?php echo $i; ?>-2" type="number" min="0" max="10">
	<input id="at-<?php echo $i; ?>-3" type="number" min="0" max="10">
	<input id="at-<?php echo $i; ?>-4" type="number" min="0" max="10">
	<input id="at-<?php echo $i; ?>-5" type="number" min="0" max="10">
	<input id="nt-<?php echo $i; ?>-1" readonly><br>
	<input id="nt-<?php echo $i; ?>-2" type="number" min="0" max="10"><br>
	<input id="mb-<?php echo $i; ?>" readonly><br>
	<script>monitoraEventos(<?php echo $i; ?>);</script>
	</form>
	<?php } ?>
	</body>
	</html>