以下代码适用于IE8,9,但不适用于IE10,Firefox或Chrome。 IE8,9及更早版本的计算是正确的,但在IE10,FF,chrome中,相应列和行中的计算值显示为NaN。 我提供了整个代码。 任何帮助将不胜感激。 提前谢谢大家。
<html>
<head></head>
<script type="text/javascript">
function enable_text(che, inp, cost) {
if (che.checked) {
var c = inp;
var d = cost;
document.getElementById('gate_req_' + c).value = d;
}
else {
var c = inp;
var d = cost;
document.getElementById('gate_req_' + c).value = 0;
}
}
</script>
<body>
<form action="" method="post" name="f1" id="f1">
<table width='95%' border='1' id='tableId' name='tableId'>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>Cost</td>
<td>discount yes/ no</td>
<td>Discount amount</td>
<td>Subtotal (Cost - Discount Amount)</td>
</tr>
<tr>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td bgcolor='#F4F4F4'>N</td>
<td id='enteredValues'>
<input name='CourseCost' readonly size='6' value=1600>
</td>
<td>
<input type='checkbox' name='check_box_[]' value=1819 onclick='enable_text(this,0,1600);calc(); ' />
<input type='hidden' name='check_box_uncheck[]' value=1819
/>
</td>
<td id='enteredValues'>
<input type='text' name='gate_req_[]' value='0' readonly id='gate_req_0' />
</td>
<td id='enteredValues'> </td>
</tr>
<tr>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td bgcolor='#F4F4F4'>S</td>
<td id='enteredValues'>
<input name='CourseCost' readonly size='6' value=1600>
</td>
<td>
<input type='checkbox' name='check_box_[]' value=1821 onclick='enable_text(this,1,1600);calc(); ' />
<input type='hidden' name='check_box_uncheck[]' value=1821
/>
</td>
<td id='enteredValues'>
<input type='text' name='gate_req_[]' value='0' readonly id='gate_req_1' />
</td>
<td id='enteredValues'> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td align='left'>Com</td>
<td align='left'>
<input name='Registration_fee' type='text' value='200' size=6 readonly />
</td>
<td> </td>
<td>
<input name='Registration0fee' value='0' size=6 readonly />
</td>
<td align='left'>
<input name='Registration_fee' value='200' size=6 />
</td>
</tr>
<tr id='columnTotals' name='columnTotals'>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>= N +S + Com</td>
<td>
<input id='sum1' name='sum1' type='text' readonly>
</td>
<td> </td>
<td>
<input id='sum2' name='sum2' type='text' readonly>
= Discount Amount Subtotal
</td>
<td>
<input id='sum3' type='text' name='sum3' readonly>
= Total
</td>
</table>
</body>
<script type="text/javascript">
window.onload = function () {
var enteredValues = document.getElementById("tableId");
var inputs = enteredValues.getElementsByTagName("input");
var columnTotals = document.getElementById("columnTotals");
(function calc() {
var col_1_total = 0, col_2_total = 0, col_3_total = 0;//initialise running totals to zero
for (var i = 1; i < enteredValues.rows.length - 1; i++) {
var cells = enteredValues.rows[i].cells;
col_1_total += Number(cells[5].firstChild.value);
col_2_total += Number(cells[7].firstChild.value);
col_3_total += Number(cells[8].innerHTML = cells[5].firstChild.value - cells[7].firstChild.value);
}
document.getElementById("sum1").setAttribute("value", col_1_total)
document.getElementById("sum2").setAttribute("value", col_2_total)
document.getElementById("sum3").setAttribute("value", col_3_total)
})();//execute calc() immediately to cater for any initial values
for (var i = 1; i < inputs.length - 1; i++) {
inputs[i].onchange = calc;
}//attach calc as onblur handler to input fields.
};
</script>
<script>
function calc() {
var enteredValues = document.getElementById("tableId");
var inputs = enteredValues.getElementsByTagName("input");
var columnTotals = document.getElementById("columnTotals");
var col_1_total = 0, col_2_total = 0, col_3_total = 0;//initialise running totals to zero
for (var i = 1; i < enteredValues.rows.length - 1; i++) {
var cells = enteredValues.rows[i].cells;
col_1_total += Number(cells[5].firstChild.value);
col_2_total += Number(cells[7].firstChild.value);
col_3_total += Number(cells[8].innerHTML = cells[5].firstChild.value - cells[7].firstChild.value);
}
document.getElementById("sum1").setAttribute("value", col_1_total)
document.getElementById("sum2").setAttribute("value", col_2_total)
document.getElementById("sum3").setAttribute("value", col_3_total)
}
</script>
</html>
答案 0 :(得分:1)
col_1_total += Number(cells[5].getElementsByTagName("input")[0].value);
col_2_total += Number(cells[7].getElementsByTagName("input")[0].value);
col_3_total += Number(cells[8].innerHTML = cells[5].getElementsByTagName("input")[0].value - cells[7].getElementsByTagName("input")[0].value);
firstChild
是一个文本节点(由<td>
和<input>
之间的空格引起),而不是您显然想要的输入元素。
此外,您的代码非常冗余,并且不完全有效html - calc()定义了两次,级别上的标记而不是/,缺少结束,等等......请考虑重写整个事情。