我想为多个输入字段创建一个自动计算数组。问题是,自动计算的工作方式与第1行的魅力相似,但不适用于第2行和第3行。我想有15排。
任何帮助都将不胜感激。
<html>
<head>
<script type="text/javascript">
function calc(){
var textValue10 = document.getElementById('input10').value;
var textValue9 = document.getElementById('input9').value;
var textValue8 = document.getElementById('input8').value;
var textValue7 = document.getElementById('input7').value;
var textValue6 = document.getElementById('input6').value;
var textValue5 = document.getElementById('input5').value;
var textValue4 = document.getElementById('input4').value;
var textValue3 = document.getElementById('input3').value;
var textValue2 = document.getElementById('input2').value;
var textValue1 = document.getElementById('input1').value;
document.getElementById('output').value = (textValue10*10) + (textValue9*9) + (textValue8*8) + (textValue7*7) + (textValue6*6) + (textValue5*5) + (textValue4*4) + (textValue3*3) + (textValue2*2) + (textValue1*1);
}
</script>
</head>
<body>
10                              9                        8                      7                    6                   5                    4                    3                   2                   1                 TOTAL<br>
<input type="text" name="input10" id="input10" size="8" onkeyup="calc()"value="">
<input type="text" name="input9" id="input9" size="8" onkeyup="calc()" value="">
<input type="text" name="input8" id="input8" size="8" onkeyup="calc()"value="">
<input type="text" name="input7" id="input7" size="8" onkeyup="calc()" value="">
<input type="text" name="input6" id="input6" size="8" onkeyup="calc()"value="">
<input type="text" name="input5" id="input5" size="8" onkeyup="calc()" value="">
<input type="text" name="input4" id="input4" size="8" onkeyup="calc()"value="">
<input type="text" name="input3" id="input3" size="8" onkeyup="calc()" value="">
<input type="text" name="input2" id="input2" size="8" onkeyup="calc()"value="">
<input type="text" name="input1" id="input1" size="8" onkeyup="calc()" value="">
<input type="text" name="output" id="output" size="16" onkeyup="calc()" value="">
<br>
10                              9                        8                      7                    6                   5                    4                    3                   2                   1                 TOTAL<br>
<input type="text" name="input10" id="input10" size="8" onkeyup="calc()"value="">
<input type="text" name="input9" id="input9" size="8" onkeyup="calc()" value="">
<input type="text" name="input8" id="input8" size="8" onkeyup="calc()"value="">
<input type="text" name="input7" id="input7" size="8" onkeyup="calc()" value="">
<input type="text" name="input6" id="input6" size="8" onkeyup="calc()"value="">
<input type="text" name="input5" id="input5" size="8" onkeyup="calc()" value="">
<input type="text" name="input4" id="input4" size="8" onkeyup="calc()"value="">
<input type="text" name="input3" id="input3" size="8" onkeyup="calc()" value="">
<input type="text" name="input2" id="input2" size="8" onkeyup="calc()"value="">
<input type="text" name="input1" id="input1" size="8" onkeyup="calc()" value="">
<input type="text" name="output" id="output" size="16" onkeyup="calc()" value="">
<br>
10                              9                        8                      7                    6                   5                    4                    3                   2                   1                 TOTAL<br>
<input type="text" name="input10" id="input10" size="8" onkeyup="calc()"value="">
<input type="text" name="input9" id="input9" size="8" onkeyup="calc()" value="">
<input type="text" name="input8" id="input8" size="8" onkeyup="calc()"value="">
<input type="text" name="input7" id="input7" size="8" onkeyup="calc()" value="">
<input type="text" name="input6" id="input6" size="8" onkeyup="calc()"value="">
<input type="text" name="input5" id="input5" size="8" onkeyup="calc()" value="">
<input type="text" name="input4" id="input4" size="8" onkeyup="calc()"value="">
<input type="text" name="input3" id="input3" size="8" onkeyup="calc()" value="">
<input type="text" name="input2" id="input2" size="8" onkeyup="calc()"value="">
<input type="text" name="input1" id="input1" size="8" onkeyup="calc()" value="">
<input type="text" name="output" id="output" size="16" onkeyup="calc()" value="">
</body>
</html>
答案 0 :(得分:0)
问题很简单,HTML元素只能有一个唯一的id
。你为多个元素提供了相同的ID。
Javascript getElementById
方法只会选择具有给定id
的第一个元素,而忽略其余元素。
这就是你的第一行像魅力和休息一样被忽略的原因。
为每个元素尝试不同的ID。或者为每行指定一个唯一的类时使用getElementsByClassName
方法。
<html>
<head>
<script type="text/javascript">
function calc() {
var row1 = document.getElementsByClassName('row1');
var row2 = document.getElementsByClassName('row2');
var row3 = document.getElementsByClassName('row3');
document.getElementById('output1').value= clacARow(row1);
document.getElementById('output2').value = clacARow(row2);
document.getElementById('output3').value = clacARow(row3);
}
function clacARow(row){
var output = 0;
for(var i=0; i<row.length;i++){
var value = (row[i].value)*(row.length-i);
console.log(i)
if(value){
output = output + value;
}
}
console.log(output);
return output;
}
</script>
</head>
<body>
10                             
9                       
8                      7                   
6                   5                   
4                    3                  
2                   1                
TOTAL
<br>
<input type="text" class="row1" name="input10" id="input10" size="8" onkeyup="calc()" value="">
<input type="text" class="row1" name="input9" id="input9" size="8" onkeyup="calc()" value="">
<input type="text" class="row1" name="input8" id="input8" size="8" onkeyup="calc()" value="">
<input type="text" class="row1" name="input7" id="input7" size="8" onkeyup="calc()" value="">
<input type="text" class="row1" name="input6" id="input6" size="8" onkeyup="calc()" value="">
<input type="text" class="row1" name="input5" id="input5" size="8" onkeyup="calc()" value="">
<input type="text" class="row1" name="input4" id="input4" size="8" onkeyup="calc()" value="">
<input type="text" class="row1" name="input3" id="input3" size="8" onkeyup="calc()" value="">
<input type="text" class="row1" name="input2" id="input2" size="8" onkeyup="calc()" value="">
<input type="text" class="row1" name="input1" id="input1" size="8" onkeyup="calc()" value="">
<input type="text" name="output" id="output1" size="16" onkeyup="calc()" disabled="disabled" value="">
<br> 10                             
9                       
8                      7                   
6                   5                   
4                    3                  
2                   1                
TOTAL
<br>
<input type="text" class="row2" name="input10" id="input10" size="8" onkeyup="calc()" value="">
<input type="text" class="row2" name="input9" id="input9" size="8" onkeyup="calc()" value="">
<input type="text" class="row2" name="input8" id="input8" size="8" onkeyup="calc()" value="">
<input type="text" class="row2" name="input7" id="input7" size="8" onkeyup="calc()" value="">
<input type="text" class="row2" name="input6" id="input6" size="8" onkeyup="calc()" value="">
<input type="text" class="row2" name="input5" id="input5" size="8" onkeyup="calc()" value="">
<input type="text" class="row2" name="input4" id="input4" size="8" onkeyup="calc()" value="">
<input type="text" class="row2" name="input3" id="input3" size="8" onkeyup="calc()" value="">
<input type="text" class="row2" name="input2" id="input2" size="8" onkeyup="calc()" value="">
<input type="text" class="row2" name="input1" id="input1" size="8" onkeyup="calc()" value="">
<input type="text" name="output" id="output2" size="16" disabled="disabled" onkeyup="calc()" value="">
<br> 10                             
9                       
8                      7                   
6                   5                   
4                    3                  
2                   1                
TOTAL
<br>
<input type="text" class="row3" name="input10" id="input10" size="8" onkeyup="calc()" value="">
<input type="text" class="row3" name="input9" id="input9" size="8" onkeyup="calc()" value="">
<input type="text" class="row3" name="input8" id="input8" size="8" onkeyup="calc()" value="">
<input type="text" class="row3" name="input7" id="input7" size="8" onkeyup="calc()" value="">
<input type="text" class="row3" name="input6" id="input6" size="8" onkeyup="calc()" value="">
<input type="text" class="row3" name="input5" id="input5" size="8" onkeyup="calc()" value="">
<input type="text" class="row3" name="input4" id="input4" size="8" onkeyup="calc()" value="">
<input type="text" class="row3" name="input3" id="input3" size="8" onkeyup="calc()" value="">
<input type="text" class="row3" name="input2" id="input2" size="8" onkeyup="calc()" value="">
<input type="text" class="row3" name="input1" id="input1" size="8" onkeyup="calc()" value="">
<input type="text" name="output" id="output3" size="16" disabled="disabled" onkeyup="calc()" value="">
</body>
</html>
答案 1 :(得分:0)
您可以使用querySelectorAll DOM来动态完成计算。
function calc(rowNumber){
var cells = document.querySelectorAll("#table tr:nth-child("+(rowNumber+2)+") td");
var sum = 0;
for (var i = 0; i < cells.length; i++) {
var val = parseFloat(cells[i].firstChild.value) * (10 - i);
if (!isNaN(val)) {
sum+=val;
}
}
cells[10].firstChild.value = sum;
}
&#13;
<table id="table">
<tr>
<td>10</td>
<td>9</td>
<td>8</td>
<td>7</td>
<td>6</td>
<td>5</td>
<td>4</td>
<td>3</td>
<td>2</td>
<td>1</td>
<td>Total</td>
</tr>
<tr>
<td><input size="8" onkeyup="calc(0)"value=""></td>
<td><input size="8" onkeyup="calc(0)"value=""></td>
<td><input size="8" onkeyup="calc(0)"value=""></td>
<td><input size="8" onkeyup="calc(0)"value=""></td>
<td><input size="8" onkeyup="calc(0)"value=""></td>
<td><input size="8" onkeyup="calc(0)"value=""></td>
<td><input size="8" onkeyup="calc(0)"value=""></td>
<td><input size="8" onkeyup="calc(0)"value=""></td>
<td><input size="8" onkeyup="calc(0)"value=""></td>
<td><input size="8" onkeyup="calc(0)"value=""></td>
<td><input size="8" value="" id="total"></td>
</tr>
<tr>
<td><input size="8" onkeyup="calc(1)"value=""></td>
<td><input size="8" onkeyup="calc(1)"value=""></td>
<td><input size="8" onkeyup="calc(1)"value=""></td>
<td><input size="8" onkeyup="calc(1)"value=""></td>
<td><input size="8" onkeyup="calc(1)"value=""></td>
<td><input size="8" onkeyup="calc(1)"value=""></td>
<td><input size="8" onkeyup="calc(1)"value=""></td>
<td><input size="8" onkeyup="calc(1)"value=""></td>
<td><input size="8" onkeyup="calc(1)"value=""></td>
<td><input size="8" onkeyup="calc(1)"value=""></td>
<td><input size="8" value="" id="total"></td>
</tr>
</table>
&#13;