JS Estrutura de respetição

26/04/2017

0

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

Responder

Posts

26/04/2017

Francisco Martins

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

02/05/2017

Victor Machado

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.
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar