<form id="form1" name="form1" method="post" action="">
<label>
<input type="submit" name="button" id="button" value="分配" />
<br />
<br />
</label>
<table width="541" border="1">
<tr>
<td>学费:</td>
<td>实收</td>
<td>差额</td>
</tr>
<tr>
<td><label>
<input name="textfield" type="text" id="textfield" value="1000" />
</label></td>
<td><label>
<input type="text" name="textfield2" id="textfield2" />
</label></td>
<td><label>
<input type="text" name="textfield3" id="textfield3" />
</label></td>
</tr>
<tr>
<td><label>
<input name="textfield4" type="text" id="textfield4" value="2000" />
</label></td>
<td><label>
<input type="text" name="textfield5" id="textfield5" />
</label></td>
<td><label>
<input type="text" name="textfield6" id="textfield6" />
</label></td>
</tr>
</table>
<label><br />
</label>
<label></label>
<label></label>
<label></label>
</form>
界面如上面。要实现的功能:当我点击分配时,实收下的文本框内的值要和学费下的值相同,当修改实收的数额时,差额也要跟着变。注:差额 = 学费 - 实收
<form id="form1" name="form1" method="post" action="">
<input type="button" value="分配" onclick="calc();"/>
<table id="test" width="541" border="1">
<tr>
<td>学费:</td>
<td>实收</td>
<td>差额</td>
</tr>
<tr>
<td><input type="text" value="1000" /></td><td><input type="text" /></td><td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" value="2000" /></td><td><input type="text" /></td><td><input type="text" /></td>
</tr>
</table>
<br/>
</form>
<script type="text/javascript">
function calc(){
var inputs, j, i, num1, num2, rows = document.getElementById('test').getElementsByTagName('tr');
for (i = 0; i < rows.length; i++) {
inputs = rows[i].getElementsByTagName('input');
if (inputs.length !== 3) continue;
for (j = 0; j < inputs.length; j++) {
num1 = parseInt(inputs[0].value) || 0, num2 = parseInt(inputs[1].value) || 0;
if (num1 && num2) inputs[2].value = num1 - num2;
}
}
}
</script>
<head>
<title> TEST </title>
</head>
<script language="javascript">
function chan(id1,id2,id3)
{
var obj01=document.getElementById(id1);
var obj02=document.getElementById(id2);
var obj03=document.getElementById(id3);
obj03.value=parseFloat(obj01.value)-parseFloat(obj02.value);
}
function init()
{
document.getElementById("textfield5").value=document.getElementById("textfield4").value;
document.getElementById("textfield2").value=document.getElementById("textfield1").value;
}</script><body onload="javascript:init();">
<form id="form1" name="form1" method="post" action="">
<label>
<input type="button" name="button" id="button" value="分配" onclick="javascript:chan('textfield1','textfield2','textfield3');chan('textfield4','textfield5','textfield6');"/>
<br />
<br />
</label>
<table width="541" border="1">
<tr>
<td>学费:</td>
<td>实收</td>
<td>差额</td>
</tr>
<tr>
<td><label>
<input name="textfield" type="text" id="textfield" value="1000" />
</label></td>
<td><label>
<input type="text" name="textfield2" id="textfield2" onchange="javascript:chan('textfield1','textfield2','textfield3');" />
</label></td>
<td><label>
<input type="text" name="textfield3" id="textfield3" />
</label></td>
</tr>
<tr>
<td><label>
<input name="textfield4" type="text" id="textfield4" value="2000" />
</label></td>
<td><label>
<input type="text" name="textfield5" id="textfield5" onchange="javascript:chan('textfield4','textfield5','textfield6');" />
</label></td>
<td><label>
<input type="text" name="textfield6" id="textfield6" />
</label></td>
</tr>
</table>
<label><br />
</label>
<label></label>
<label></label>
<label></label>
</form>
</body>
</html>
试看...
<input type="button" value="分配" onclick="calc();"/>
<table id="test" width="541" border="1">
<tr>
<td>学费:</td>
<td>实收</td>
<td>差额</td>
</tr>
<tr>
<td><input type="text" value="1000" id="b1"/></td>
<td><input type="text" id="c1"/></td>
<td><input type="text" id="d1"/></td>
</tr>
<tr>
<td><input type="text" value="2000" id="b2"/></td>
<td><input type="text" id="c2"/></td>
<td><input type="text" id="d2"/></td>
</tr>
</table>
<br/>
</form>
<script language="javascript">
function change_diff(x){
if(x===0){
for(var i=1;i<3;i++){
var b=eval("document.form1.b"+i);
var c=eval("document.form1.c"+i);
var d=eval("document.form1.d"+i);
c.value=b.value;d.value=0;
}
}else{
var b=eval("document.form1.b"+x);
var c=eval("document.form1.c"+x);
var d=eval("document.form1.d"+x);
d.value=b.value-c.value;
//还可以增加一些你认为有必要的数据有效性语句。
}
}
</script>
<form id="form1" name="form1" method="post" action="">
<input type="button" value="分配" onclick="change_diff(0);"/>
<table id="test" width="541" border="1">
<tr>
<td>学费:</td>
<td>实收</td>
<td>差额</td>
</tr>
<tr>
<td><input type="text" value="1000" id="b1"/></td>
<td><input type="text" id="c1" onkeyup="change_diff(1)"/></td>
<td><input type="text" id="d1"/></td>
</tr>
<tr>
<td><input type="text" value="2000" id="b2"/></td>
<td><input type="text" id="c2" onkeyup="change_diff(2)"/></td>
<td><input type="text" id="d2"/></td>
</tr>
</table>
<br/>
</form>