JS Estrutura de respetição

HTML

JavaScript

26/04/2017

Olá amigos estou fazendo um site escolar e estou me complicando com meu código, é uma tabela com feita com estrutura de repetição fiz a primeira "tr" e em seguida coloquei pra repetir até ai tudo bem o q complica é que em quando é executado, só acontece a soma na primeira "tr", acredito que o sejo seja porque tenha apenas uma variável chamada resultado, porem não consigo criar mais variáveis resultado com estrutura de repetição.



<html>
<head>
	<title></title><meta charset="utf-8">

</head>
<body>
<form>
<table border="1" width="100%" height="100%">
<script type="text/javascript">



document.write("<tr><td>Janeiro</td></tr>");


for (i=0;i<33;i++){
	
	if (i > 0 && i < 32) {
	document.write("<td>"+i+"</td>");
	} else if (i == 0) {
		document.write("<td> N°/D </td>");
	}
	else {
		document.write("<td> F </td>");
}
}




function calcular() {
    var num1 = Number(document.getElementById("num1").value);
    var num2 = Number(document.getElementById("num2").value);
    var num3 = Number(document.getElementById("num3").value);
    var num4 = Number(document.getElementById("num4").value);
    var num5 = Number(document.getElementById("num5").value);
    var num6 = Number(document.getElementById("num6").value);
    var num7 = Number(document.getElementById("num7").value);
    var num8 = Number(document.getElementById("num8").value);
    var num9 = Number(document.getElementById("num9").value);
    var num10 = Number(document.getElementById("num10").value);
    var num11 = Number(document.getElementById("num11").value);
    var num12 = Number(document.getElementById("num12").value);
    var num13 = Number(document.getElementById("num13").value);
    var num14 = Number(document.getElementById("num14").value);
    var num15 = Number(document.getElementById("num15").value);
    var num16 = Number(document.getElementById("num16").value);
    var num17 = Number(document.getElementById("num17").value);
    var num18 = Number(document.getElementById("num18").value);
    var num19 = Number(document.getElementById("num19").value);
    var num20 = Number(document.getElementById("num20").value);
    var num21 = Number(document.getElementById("num21").value);
    var num22 = Number(document.getElementById("num22").value);
    var num23 = Number(document.getElementById("num23").value);
    var num24 = Number(document.getElementById("num24").value);
    var num25 = Number(document.getElementById("num25").value);
    var num26 = Number(document.getElementById("num26").value);
    var num27 = Number(document.getElementById("num27").value);
    var num28 = Number(document.getElementById("num28").value);
    var num29 = Number(document.getElementById("num29").value);
    var num30 = Number(document.getElementById("num30").value);
    var num31 = Number(document.getElementById("num31").value);
    

    var elemResult = document.getElementById("resultado");
    


    if (elemResult.textContent === undefined) {
       elemResult.textContent = String(num1 + num2 + num3 + num4 + num5 + num6 + num7 + num8 + num9 + num10 + num11 + num12 + num13 + num14 + num15 + num16 + num17 + num18 + num19 + num20 + num21 + num22 + num23 + num24 + num25 + num26 + num27 + num28 + num29 + num30 + num31);
    }
    else {
       elemResult.innerText = String(num1 + num2 + num3 + num4 + num5 + num6 + num7 + num8 + num9 + num10 + num11 + num12 + num13 + num14 + num15 + num16 + num17 + num18 + num19 + num20 + num21 + num22 + num23 + num24 + num25 + num26 + num27 + num28 + num29 + num30 + num31);
    }
}	




for (i=1;i<=50;i++){
    
   
		if (i > 0 && i <=50) {
	document.write("<tr><td>"+i+"</td>");

	}

for (a=1;a<=31;a++){

	document.write("<td><select type='text' id='num"+a+"' onblur='calcular();'><option value='000'> - </option><option value='1'> F </option><option value='2'> FF </option><option value='3'> FFF </option><option value='4'> FFFF </option></select></td>");
}

document.write("<td><span id='resultado'></span></td>");
document.write("</tr>");


}


</script>
</table>
</form>
</body>
</html>
Francisco Martins

Francisco Martins

Curtidas 0

Respostas

Francisco Martins

Francisco Martins

26/04/2017

desculpem os erros de gramática, foi porque pedi pro meu irmão mais novo postar, enquanto tive que sair...
GOSTEI 0
Victor Machado

Victor Machado

26/04/2017

Ola Francisco.

Eu fiz umas modificações no na estrutura da table e na função para calcular:

Eu coloquei uma classe para identificar cada linha da tabela e troquei o id de cada select para uma classe, assim você pode pegar todos os selects de cada linha e calcular o valor, assim como a coluna do resultado.

<html>
    <head>
        <title></title><meta charset="utf-8">
    </head>
    <body>
        <form>
            <table border="1" width="100%" height="100%">
                <script type="text/javascript">
                    document.write("<tr><td>Janeiro</td></tr>");

                    for (i=0;i<33;i++){
                        if (i > 0 && i < 32) {
                            document.write("<td>"+i+"</td>");
                        } else if (i == 0) {
                            document.write("<td> N°/D </td>");
                        }
                        else {
                            document.write("<td> F </td>");
                        }
                    }

                    function calcular() {
                        var linhas = document.getElementsByClassName("linha"); //obtendo todas as linhas
                        linhas = [].slice.call(linhas); //transforma em array

                        linhas.forEach(function(linha){
                            var numeros = linha.getElementsByClassName("num"); //obtendo todas as linhas
                            numeros = [].slice.call(numeros); //transforma em array

                            var total = 0; //variável  para guardar o valor total da linha

                            numeros.forEach(function(numero){
                                total += parseInt(numero.value);//converte o valor para int e soma a variavel total
                            });

                            linha.getElementsByClassName("resultado")[0].innerText = total; //coloca o total no resultado
                        });
                    }	

                    for (i=1;i<=50;i++){
                        if (i > 0 && i <=50) {
                            document.write("<tr class='linha' ><td>"+i+"</td>");
                        }

                        for (a=1;a<=31;a++){
                            document.write("<td><select type='text' class='num' onchange='calcular();'><option value='000'> - </option><option value='1'> F </option><option value='2'> FF </option><option value='3'> FFF </option><option value='4'> FFFF </option></select></td>");
                        }

                        document.write("<td><span class='resultado'></span></td>");
                        document.write("</tr>");
                    }

                </script>
            </table>
        </form>
    </body>
</html>


Obs.: deixei um comentário em cada passo da função.
GOSTEI 0
POSTAR