-2
以下代碼適用於IE8,9，IE10，Firefox或chrome不適用。 在IE8,9和舊版本中計算正確，但在IE10，FF和Chrome中，相應列和行中的計算值顯示爲NaN。 我已經提供了完整的代碼。 任何幫助將不勝感激。 謝謝大家提前。innerHTML firstChild.value適用於IE9 IE8，但不適用IE10，Firefox，Chrome
<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>
嘗試將示例的大小降至最小的可能的代碼來演示問題。 – jdigital 2013-05-03 23:40:53
你想firstElementChild，而不是firstChild。 – 2013-05-04 00:27:45