你好，这是我想做的。每次表格更改时，它都会将总成绩相加。但问题是，当我试图求和时，总数是NaN。有人能帮我吗？
这是我的密码。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href ="css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="shortcut icon" type="img/png" href="img/gapclogo.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.table-bordered{
width: auto !important;
margin-top: 200px;
}
</style>
</head>
<body>
<table class="table table-bordered" align="center" >
<thead>
<tr>
<th width="300">Name</th>
<th width="100">Long Quiz 20%</th>
<th width="100">Attendance 10%</th>
<th width="100">Homework/Seatwork 20%</th>
<th width="100">Recitation 10%</th>
<th width="100">Major Exam 40%</th>
<th width="100">Grade</th>
<th width="100">Equivalent</th>
<th width="100">Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td contenteditable="true" onkeydown="Calculate();" id="quiz"></td>
<td contenteditable="true" onkeydown="Calculate();" id="atten"></td>
<td contenteditable="true" onkeydown="Calculate();" id="home"></td>
<td contenteditable="true" onkeydown="Calculate();" id="reci"></td>
<td contenteditable="true" onkeydown="Calculate();" id="me"></td>
<td id="td_grade"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
function Calculate()
{
var q = parseInt(document.getElementById('quiz').value);
var a = parseInt(document.getElementById('atten').value);
var h = parseInt(document.getElementById('home').value);
var r = parseInt(document.getElementById('reci').value);
var m = parseInt(document.getElementById('me').value);
var grade = q + a + h + r + m;
document.getElementById('td_grade').innerHTML = grade;
}
</script>
</body>
</html>
-
使用
Unary plus(+)或Number而不是parseInt，因为parseInt('')将被评估为NaN -
使用
textContent而不是value -
注意：使用
onInput而不是onkeydown
function Calculate() {
var q = +(document.getElementById('quiz').textContent);
var a = +(document.getElementById('atten').textContent);
var h = +(document.getElementById('home').textContent);
var r = +(document.getElementById('reci').textContent);
var m = +(document.getElementById('me').textContent);
var grade = q + a + h + r + m;
document.getElementById('td_grade').innerHTML = grade;
}.table-bordered {
width: auto !important;
margin-top: 200px;
}<table class="table table-bordered" align="center">
<thead>
<tr>
<th width="300">Name</th>
<th width="100">Long Quiz 20%</th>
<th width="100">Attendance 10%</th>
<th width="100">Homework/Seatwork 20%</th>
<th width="100">Recitation 10%</th>
<th width="100">Major Exam 40%</th>
<th width="100">Grade</th>
<th width="100">Equivalent</th>
<th width="100">Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td contenteditable="true" oninput="Calculate();" id="quiz"></td>
<td contenteditable="true" oninput="Calculate();" id="atten"></td>
<td contenteditable="true" oninput="Calculate();" id="home"></td>
<td contenteditable="true" oninput="Calculate();" id="reci"></td>
<td contenteditable="true" oninput="Calculate();" id="me"></td>
<td id="td_grade"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>