<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>
界面如上面。要实现的功能:当我点击分配时,实收下的文本框内的值要和学费下的值相同,当修改实收的数额时,差额也要跟着变。注:差额 = 学费 - 实收

解决方案 »

  1.   

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <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>
      

  2.   

    <html>
    <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>
    试看...
      

  3.   

    当然<input name="textfirst"> 里的name可变成有规律的名称
      

  4.   

    上面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" 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>
      

  5.   


    <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>