要求:
在用户输入单科成绩时,总分栏能自动求各显示。
<table border="0" width="80%">
<tr>
<td height="20" align="center">语文</td>
<td height="20" align="center">数学</td>
<td height="20" align="center">英语</td>
<td height="20" align="center">社会</td>
<td height="20" align="center">科学</td>
<td height="20" align="center">体育</td>
<td height="20" align="center">总分</td>
</tr>
<tr>
<td height="20" align="center"><input type="text" name="score1" size="4"></td>
<td height="20" align="center"><input type="text" name="score2" size="4"></td>
<td height="20" align="center"><input type="text" name="score3" size="4"></td>
<td height="20" align="center"><input type="text" name="score4" size="4"></td>
<td height="20" align="center"><input type="text" name="score5" size="4"></td>
<td height="20" align="center"><input type="text" name="score6" size="4"></td>
<td height="20" align="center"><input type="text" name="scoretotal" size="4"></td></tr>
</table>
在用户输入单科成绩时,总分栏能自动求各显示。
<table border="0" width="80%">
<tr>
<td height="20" align="center">语文</td>
<td height="20" align="center">数学</td>
<td height="20" align="center">英语</td>
<td height="20" align="center">社会</td>
<td height="20" align="center">科学</td>
<td height="20" align="center">体育</td>
<td height="20" align="center">总分</td>
</tr>
<tr>
<td height="20" align="center"><input type="text" name="score1" size="4"></td>
<td height="20" align="center"><input type="text" name="score2" size="4"></td>
<td height="20" align="center"><input type="text" name="score3" size="4"></td>
<td height="20" align="center"><input type="text" name="score4" size="4"></td>
<td height="20" align="center"><input type="text" name="score5" size="4"></td>
<td height="20" align="center"><input type="text" name="score6" size="4"></td>
<td height="20" align="center"><input type="text" name="scoretotal" size="4"></td></tr>
</table>
<table border="0" width="80%" id='t'>
<tr>
<td height="20" align="center">语文</td>
<td height="20" align="center">数学</td>
<td height="20" align="center">英语</td>
<td height="20" align="center">社会</td>
<td height="20" align="center">科学</td>
<td height="20" align="center">体育</td>
<td height="20" align="center">总分</td>
</tr>
<tr>
<td height="20" align="center"><input type="text" name="score1" size="4"></td>
<td height="20" align="center"><input type="text" name="score2" size="4"></td>
<td height="20" align="center"><input type="text" name="score3" size="4"></td>
<td height="20" align="center"><input type="text" name="score4" size="4"></td>
<td height="20" align="center"><input type="text" name="score5" size="4"></td>
<td height="20" align="center"><input type="text" name="score6" size="4"></td>
<td height="20" align="center"><input type="text" name="scoretotal" size="4"></td>
</tr>
</table>
<script type="text/javascript">
(function(table) {
var _list = document.getElementById(table).getElementsByTagName('input');
this.map = {};
var _len = _list.length - 1;
this.total = _list[_len];
//this.total.disabled = true;
var _sub;
for(var i = 0; i < _len; i++) {
var _sub = _list[i];
this.map[_sub.name] = {no: 0};
_sub.onblur = function() {
var _sum = total.value.replace(/^\s*|\s*$/, '');
_sum = _sum? parseFloat(_sum) : 0;
var _subNo = this.value.replace(/^\s*|\s*$/, '');
_subNo = _subNo? parseFloat(_subNo) : 0;
var _oldNo = map[this.name].no;
if(_oldNo != _subNo) {
total.value = _sum - _oldNo + _subNo;
map[this.name].no = _subNo;
}
}
}
})('t');
</script>
<table border="0" width="80%" id='t'>
<tr>
<td height="20" align="center">语文</td>
<td height="20" align="center">数学</td>
<td height="20" align="center">英语</td>
<td height="20" align="center">社会</td>
<td height="20" align="center">科学</td>
<td height="20" align="center">体育</td>
<td height="20" align="center">总分</td>
</tr>
<tr>
<td height="20" align="center"><input type="text" name="score1" size="4"></td>
<td height="20" align="center"><input type="text" name="score2" size="4"></td>
<td height="20" align="center"><input type="text" name="score3" size="4"></td>
<td height="20" align="center"><input type="text" name="score4" size="4"></td>
<td height="20" align="center"><input type="text" name="score5" size="4"></td>
<td height="20" align="center"><input type="text" name="score6" size="4"></td>
<td height="20" align="center"><input type="text" name="scoretotal" id="scoretotal" size="4"></td>
</tr>
</table>
</form>
<span id="msg"></span>
<script type="text/javascript">
var _t = document.getElementById('t');
var _list = _t.getElementsByTagName('input');
var _len = _list.length - 1;
for(var i = 0; i < _len; i++) {
_list[i].onblur=function(){
if(!parseFloat(this.value)){
this.style.backgroundColor="#cccccc";
document.getElementById("msg").innerHTML="请输入数字!";
}else{
this.style.backgroundColor="transparent";
document.getElementById("msg").innerHTML="";
}
var sum=0;
for(var j=0;j<_len;j++){
if(parseFloat(_list[j].value)) sum+=parseFloat(_list[j].value);
}
document.myform.scoretotal.value=sum;
}
}
</script>