我有一个表格，当将值输入到单元格时，该表格会动态计算。将表中每列的第二个和第三个单元格相加，以获取第4个单元格中的值，垂直的所有值都应相加，以得出最后最后一个单元格的总数。有一个单元无法正确计算，即使调试后也无法弄清楚原因。最后一行和最后一列中的最后一个单元格会计算较晚且不正确。任何帮助将不胜感激。
<table border="1" id="regionLead">
<tr>
<th colspan="4">Region Lead</th>
</tr>
<tr>
<td>Region</td>
<td>Deployed</td>
<td>Vacant</td>
<td>Total</td>
</tr>
<tr>
<td>Eastern</td>
<td><input type="text" value="0" class="column1" id="easternDeployed" onchange="test.calculate()" style="background-color:#eee;width:55px"/></td>
<td><input type="text" value="0" class="column2" id="easternVacant" onchange="test.calculate()" style="background-color:#eee;width:55px"/></td>
<td><div class="column3" id="easternTotal">0</div></td>
</tr>
<tr>
<td>Southern</td>
<td><input type="text" value="0" class="column1" id="southernDeployed" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
<td><input type="text" value="0" class="column2" id="southernVacant" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
<td><div class="column3" id="southernTotal">0</div></td>
</tr>
<tr>
<td>Central</td>
<td><input type="text" value="0" class="column1" id="centralDeployed" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
<td><input type="text" value="0" class="column2" id="centralVacant" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
<td><div class="column3" id="centralTotal">0</div></td>
</tr>
<tr>
<td>Western</td>
<td><input type="text" value="0" class="column1" id="westernDeployed" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
<td><input type="text" value="0" class="column2" id="westernVacant" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
<td><div class="column3" id="westernTotal">0</div></td>
</tr>
<tr>
<td>Europe</td>
<td><input type="text" value="0" class="column1" id="europeDeployed" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
<td><input type="text" value="0" class="column2" id="europeVacant" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
<td><div class="column3" id="europeTotal">0</div></td>
</tr>
<tr>
<td>Asia</td>
<td><input type="text" value="0" class="column1" id="asiaDeployed" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
<td><input type="text" value="0" class="column2" id="asiaVacant" onkeydown="test.hide()" style="background-color:#eee;width:55px"/></td>
<td><div class="column3" id="asiatotalTotal">0</div></td>
</tr>
<tr>
<td>Total</td>
<td><div id="deployed"></div></td>
<td><div id="vacant"></div></td>
<td style="background-color:yellow"><div id="total"></div></td>
</tr>
</table>
var allBoxes =
document.querySelector("#regionLead");
calculate(allBoxes);
function calculate(tbl){
tbl.addEventListener("change", function(e){
if (e.target.tagName === "INPUT"){
var rowNode = e.target.parentNode.parentNode;
//console.log(rowNode);
var rowInputs =
rowNode.getElementsByTagName('input');
var tableNode = e.target.parentNode.parentNode.parentNode;
// console.log(tableNode);
/*get Deployed column of the table to add up*/
var columnInputs = tableNode.getElementsByClassName('column1');
/*get Vacant column of the table to add up*/
var columnInputs2 = tableNode.getElementsByClassName('column2');
/*get Vacant column of the table to add up*/
var columnInputs3= tableNode.getElementsByClassName('column3');
//alert(columnInputs3.length)
var colSum = 0
for(var i=0; i<columnInputs.length; i++){
colSum += parseInt(columnInputs[i].value);
}
var colSum2 = 0
for(var i=0; i<columnInputs2.length; i++){
colSum2 += parseInt(columnInputs2[i].value);
}
var colSum3 = 0
for(var i=0; i<columnInputs3.length; i++){
console.log(parseInt(columnInputs3[i].innerText));
colSum3 += parseInt(columnInputs3[i].innerHTML);
}
//Last cell in the deployed column
tableNode.rows[8].cells[1].innerHTML = colSum;
//Last cell in the vacan column
tableNode.rows[8].cells[2].innerHTML = colSum2;
tableNode.rows[8].cells[3].innerHTML = colSum3;
var rowDiv = rowNode.getElementsByTagName('div');
var before = rowInputs[0].value || 0;
var after = rowInputs[1].value || 0;
if(before && after){
var total = parseInt(before)+parseInt(after);
rowDiv[0].innerHTML = total;
}
}
})
}
答案 0 :(得分：2)
尝试一下：
在Codepen上的JavaScript代码的第44行中，将 @keyframes pageon{
0% {border-bottom: 0px solid #7b7b7b;}
100% {border-bottom: 3px solid #7b7b7b;}
}
@-webkit-keyframes pageon{
0% {-webkit-border-bottom: 0px solid #7b7b7b;}
100% {-webkit-border-bottom: 3px solid #7b7b7b;}
}
.pageon{
animation-name: pageon;
animation-duration: 200ms;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
-webkit-animation-name: pageon;
-webkit-animation-duration: 200ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
}
@keyframes pageoff{
0% {border-bottom: 3px solid #7b7b7b;}
100% {border-bottom: 0px solid #7b7b7b;}
}
@-webkit-keyframes pageoff{
0% {-webkit-border-bottom: 3px solid #7b7b7b;}
100% {-webkit-border-bottom: 0px solid #7b7b7b;}
}
.pageoff{
animation-name: pageoff;
animation-duration: 200ms;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
-webkit-animation-name: pageoff;
-webkit-animation-duration: 200ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
}
替换为colSum3。
第44行如下所示：
colSum + colSum2通过这种方式，动态添加tableNode.rows[8].cells[3].innerHTML = colSum + colSum2;
和colSum，并用其他网格更新黄色网格单元。
（我仍然不知道为什么colSum2和colSum3和colSum不更新。）