文本框之间自动计算。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>amt</title>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
</head>
 
<body>
 <table  border=1 cellpadding=0 cellspacing=0  class="table_stock_title" id="table1" style="width:100%">
         <thead class="fixedHeader">
           <tr >
             <td width="35"    style="padding-left:3px;">行号</td>
             <td>产品名称</td>
             <td>数量</td>
             <td> 规格</td>
             <td>袋数</td>
             <td> 单价</td>
             <td> 金额</td>
           </tr>
         </thead>
         <tr>
           <td >1</td>
           <td >A</td>
           <td>
             <input type="text" name="qty" id="qty">
           </td>
           <td >
             <input name="spec" type="text" id="spec" value="20KG/袋">
           </td>
           <td >
             <input type="text" name="bls" id="bls">
           </td>
           <td>
             <input type="text" name="up" id="up">
           </td>
           <td >
             <input type="text" name="amt" id="amt">
           </td>
         </tr>
         <tr>
           <td >2</td>
           <td >B</td>
           <td>
             <input type="text" name="qty" id="qty">
           </td>
           <td >
             <input name="spec" type="text" id="spec" value="30KG/袋">
           </td>
           <td >
             <input type="text" name="bls" id="bls">
           </td>
           <td>
             <input type="text" name="up" id="up">
           </td>
           <td >
             <input type="text" name="amt" id="amt">
           </td>
         </tr>
         <tr>
           <td >3</td>
           <td >C</td>
          <td>
             <input type="text" name="qty" id="qty">
           </td>
           <td >
             <input name="spec" type="text" id="spec" value="50KG/袋">
           </td>
           <td >
             <input type="text" name="bls" id="bls">
           </td>
           <td>
             <input type="text" name="up" id="up">
           </td>
           <td >
             <input type="text" name="amt" id="amt">
           </td>
         </tr>
         <tr>
           <td >4</td>
           <td >D</td>
          <td>
             <input type="text" name="qty" id="qty">
           </td>
           <td >
             <input name="spec" type="text" id="spec" value="100KG/袋">
           </td>
           <td >
             <input type="text" name="bls" id="bls">
           </td>
           <td>
             <input type="text" name="up" id="up">
           </td>
           <td >
             <input type="text" name="amt" id="amt">
           </td>
         </tr>
         <tr>
           <td >5</td>
           <td >E</td>
           <td>
             <input type="text" name="qty" id="qty">
           </td>
           <td >
             <input name="spec" type="text" id="spec" value="200KG/袋">
           </td>
           <td >
             <input type="text" name="bls" id="bls">
           </td>
           <td>
             <input type="text" name="up" id="up">
           </td>
           <td >
             <input type="text" name="amt" id="amt">
           </td>
         </tr>
       </table>
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
     <td width="82%"><div align="right">合计：</div></td>
     <td width="18%">
       <input type="text" name="total" id="total">
     </td>
   </tr>
 </table>
 
<script>
$('input[name=qty],input[name=up]').blur(function(){
var ac=0;
$('tr').each(function(){
var t=$(this);
var a=parseInt(t.find('input[name=qty]').val())||0;
var b=parseInt(t.find('input[name=spec]').val())||1;
var c=a/b;
t.find('input[name=bls]').val(c);
var d=parseInt(t.find('input[name=up]').val())||0;
var e=a*d;
t.find('input[name=amt]').val(d);
ac+=e;
});
$('#total').val(ac);
})
</script>
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>amt</title>
    </head><body>
    <table  border=1 cellpadding=0 cellspacing=0  class="table_stock_title" id="table1" style="width:100%">
        <thead class="fixedHeader">
        <tr >
            <td width="35"    style="padding-left:3px;">行号</td>
            <td>产品名称</td>
            <td>数量</td>
            <td> 规格</td>
            <td>袋数</td>
            <td> 单价</td>
            <td> 金额</td>
        </tr>
        </thead>
        <tr>
            <td >1</td>
            <td >A</td>
            <td>
                <input type="text" name="qty" id="qty">
            </td>
            <td >
                <input name="spec" type="text" id="spec" value="20KG/袋">
            </td>
            <td >
                <input type="text" name="bls" id="bls">
            </td>
            <td>
                <input type="text" name="up" id="up">
            </td>
            <td >
                <input type="text" name="amt" id="amt">
            </td>
        </tr>
        <tr>
            <td >2</td>
            <td >B</td>
            <td>
                <input type="text" name="qty" id="qty">
            </td>
            <td >
                <input name="spec" type="text" id="spec" value="30KG/袋">
            </td>
            <td >
                <input type="text" name="bls" id="bls">
            </td>
            <td>
                <input type="text" name="up" id="up">
            </td>
            <td >
                <input type="text" name="amt" id="amt">
            </td>
        </tr>
        <tr>
            <td >3</td>
            <td >C</td>
            <td>
                <input type="text" name="qty" id="qty">
            </td>
            <td >
                <input name="spec" type="text" id="spec" value="50KG/袋">
            </td>
            <td >
                <input type="text" name="bls" id="bls">
            </td>
            <td>
                <input type="text" name="up" id="up">
            </td>
            <td >
                <input type="text" name="amt" id="amt">
            </td>
        </tr>
        <tr>
            <td >4</td>
            <td >D</td>
            <td>
                <input type="text" name="qty" id="qty">
            </td>
            <td >
                <input name="spec" type="text" id="spec" value="100KG/袋">
            </td>
            <td >
                <input type="text" name="bls" id="bls">
            </td>
            <td>
                <input type="text" name="up" id="up">
            </td>
            <td >
                <input type="text" name="amt" id="amt">
            </td>
        </tr>
        <tr>
            <td >5</td>
            <td >E</td>
            <td>
                <input type="text" name="qty" id="qty">
            </td>
            <td >
                <input name="spec" type="text" id="spec" value="200KG/袋">
            </td>
            <td >
                <input type="text" name="bls" id="bls">
            </td>
            <td>
                <input type="text" name="up" id="up">
            </td>
            <td >
                <input type="text" name="amt" id="amt">
            </td>
        </tr>
    </table>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td width="82%"><div align="right">合计：</div></td>
            <td width="18%">
                <input type="text" name="total" id="total">
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        function getAllText(dom){
            return dom.parentNode.parentNode.getElementsByTagName('input');
        }
        function getTotal(){    }
        function init(){
            var inputs=document.getElementsByTagName('input'),prices=[];
            for(var i= 0,len=inputs.length;i<len;i++){
                if(inputs[i].name=='amt'){
                    prices.push(inputs[i]);
                }
                inputs[i].onchange=function(){
                    var is=getAllText(this);
                    switch(this.name){
                        case "qty":
                            is[2].value=this.value/parseInt(is[1].value);
                            break;
                        case "up":
                            is[4].value=this.value*is[0].value;
                            var t=0;
                            for(var j= 0;j<prices.length;j++){
                                t+=(parseInt(prices[j].value)||0);
                            }
                            document.getElementById('total').value=t;
                            break;
                    }
                }
            }
        }
        init();
    </script>
    </body>
    </html>
      

  2.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>amt</title>
    <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
    </head>
      
    <body>
     <table  border=1 cellpadding=0 cellspacing=0  class="table_stock_title" id="table1" style="width:100%">
             <thead class="fixedHeader">
               <tr >
                 <td width="35"    style="padding-left:3px;">行号</td>
                 <td>产品名称</td>
                 <td>数量</td>
                 <td> 规格</td>
                 <td>袋数</td>
                 <td> 单价</td>
                 <td> 金额</td>
               </tr>
             </thead>
             <tr>
               <td >1</td>
               <td >A</td>
               <td>
                 <input type="text" name="qty" id="qty">
               </td>
               <td >
                 <input name="spec" type="text" id="spec" value="20KG/袋">
               </td>
               <td >
                 <input type="text" name="bls" id="bls">
               </td>
               <td>
                 <input type="text" name="up" id="up">
               </td>
               <td >
                 <input type="text" name="amt" id="amt">
               </td>
             </tr>
             <tr>
               <td >2</td>
               <td >B</td>
               <td>
                 <input type="text" name="qty" id="qty">
               </td>
               <td >
                 <input name="spec" type="text" id="spec" value="30KG/袋">
               </td>
               <td >
                 <input type="text" name="bls" id="bls">
               </td>
               <td>
                 <input type="text" name="up" id="up">
               </td>
               <td >
                 <input type="text" name="amt" id="amt">
               </td>
             </tr>
             <tr>
               <td >3</td>
               <td >C</td>
              <td>
                 <input type="text" name="qty" id="qty">
               </td>
               <td >
                 <input name="spec" type="text" id="spec" value="50KG/袋">
               </td>
               <td >
                 <input type="text" name="bls" id="bls">
               </td>
               <td>
                 <input type="text" name="up" id="up">
               </td>
               <td >
                 <input type="text" name="amt" id="amt">
               </td>
             </tr>
             <tr>
               <td >4</td>
               <td >D</td>
              <td>
                 <input type="text" name="qty" id="qty">
               </td>
               <td >
                 <input name="spec" type="text" id="spec" value="100KG/袋">
               </td>
               <td >
                 <input type="text" name="bls" id="bls">
               </td>
               <td>
                 <input type="text" name="up" id="up">
               </td>
               <td >
                 <input type="text" name="amt" id="amt">
               </td>
             </tr>
             <tr>
               <td >5</td>
               <td >E</td>
               <td>
                 <input type="text" name="qty" id="qty">
               </td>
               <td >
                 <input name="spec" type="text" id="spec" value="200KG/袋">
               </td>
               <td >
                 <input type="text" name="bls" id="bls">
               </td>
               <td>
                 <input type="text" name="up" id="up">
               </td>
               <td >
                 <input type="text" name="amt" id="amt">
               </td>
             </tr>
           </table>
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
         <td width="82%"><div align="right">合计：</div></td>
         <td width="18%">
           <input type="text" name="total" id="total">
         </td>
       </tr>
     </table>
      
    <script>
      function fa(num)
    {
       return  Math.ceil(num*1000)/1000;
    }
      function f(){
    $(this).parents('tr').each(function(){
    var t=$(this);
    var a=parseInt(t.find('input[name=qty]').val())||0;
    var b=parseInt(t.find('input[name=spec]').val())||1;
    var c=a/b;
    t.find('input[name=bls]').val(c);
    var d=parseFloat(t.find('input[name=up]').val())||0;
    var e=a*d;
    t.find('input[name=amt]').val(fa(e));
    });
    $('#total').val(fa(eval($('input[name=amt]').map(function(){return parseFloat(this.value)||0}).get().join('+'))));
      }
    $('input[name=qty],input[name=up]').blur(f).keydown(function(e){if(e.keyCode==13)f.call(this)})
    </script>
    </body>
    </html>
      

  3.   

    感觉就是onchange、onblur，其他的就根据具体的要求写逻辑就可以了，把思路弄清楚，代码应该不难吧。
      

  4.   


    还有一个地方修改下就更好了，现在的情况鼠标点击任何一行的“数量”栏，就算不输入值，失去焦点也会给对应的计算项赋值，帮忙加个条件，要“数量”有输入值的时候，回车或者失去焦点才计算，我试着加了个if(!t.val())在前面不管用，谢谢。
      

  5.   


    还有一个地方修改下就更好了，现在的情况鼠标点击任何一行的“数量”栏，就算不输入值，失去焦点也会给对应的计算项赋值，帮忙加个条件，要“数量”有输入值的时候，回车或者失去焦点才计算，我试着加了个if(!t.val())在前面不管用，谢谢。
    在数量那一栏上判断<script>
      function fa(num)
    {
       return  Math.ceil(num*1000)/1000;
    }
      function f(){
    $(this).parents('tr').each(function(){
    var t=$(this);
      if(!t.find('input[name=qty]').val())return false;
    var a=parseInt(t.find('input[name=qty]').val())||0;
    var b=parseInt(t.find('input[name=spec]').val())||1;
    var c=a/b;
    t.find('input[name=bls]').val(c);
    var d=parseFloat(t.find('input[name=up]').val())||0;
    var e=a*d;
    t.find('input[name=amt]').val(fa(e));
    });
    $('#total').val(fa(eval($('input[name=amt]').map(function(){return parseFloat(this.value)||0}).get().join('+'))));
      }
    $('input[name=qty],input[name=up]').blur(f).keydown(function(e){if(e.keyCode==13)f.call(this)})
    </script>
      

  6.   


    还有一个地方修改下就更好了，现在的情况鼠标点击任何一行的“数量”栏，就算不输入值，失去焦点也会给对应的计算项赋值，帮忙加个条件，要“数量”有输入值的时候，回车或者失去焦点才计算，我试着加了个if(!t.val())在前面不管用，谢谢。
    在数量那一栏上判断<script>
      function fa(num)
    {
       return  Math.ceil(num*1000)/1000;
    }
      function f(){
    $(this).parents('tr').each(function(){
    var t=$(this);
      if(!t.find('input[name=qty]').val())return false;
    var a=parseInt(t.find('input[name=qty]').val())||0;
    var b=parseInt(t.find('input[name=spec]').val())||1;
    var c=a/b;
    t.find('input[name=bls]').val(c);
    var d=parseFloat(t.find('input[name=up]').val())||0;
    var e=a*d;
    t.find('input[name=amt]').val(fa(e));
    });
    $('#total').val(fa(eval($('input[name=amt]').map(function(){return parseFloat(this.value)||0}).get().join('+'))));
      }
    $('input[name=qty],input[name=up]').blur(f).keydown(function(e){if(e.keyCode==13)f.call(this)})
    </script>原来是加错地方了，谢谢。