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
Curtir tópico
+ 0
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.
Obs.: deixei um comentário em cada passo da função.
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
Clique aqui para fazer login e interagir na Comunidade :)
