Jquery之事件绑定(bind)实现加减乘除运算

来源：互联网发布：apple care mac 怎么买编辑：程序博客网时间：2024/06/08 12:26
本实例采用Jquery事件绑定实现加减乘除运算，以表格输入框任意输入一个值进行变换计算。主要通过Jquery的事件绑定来实现。
事件绑定语法：

$(selector).bind('event',function(){ });
如：$(selector).bind('click',function(){ alert("您点击了我哦！人家好害羞的呢^_^"); });
Html与Jquery代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery减法</title><script src="../js/jquery-1.7.min.js"></script><script type="text/jscript">$(document).ready(function() {/**************************tab1***********************/            $("#tab1 tr").each(function(){           var trs=[];           var tr=$(this);           $(tr).find("input").each(function(){              trs.push($(this));           });              $(trs[1]).bind("blur",function(){                trs[2].val(parseFloat(trs[0].val())-parseFloat(trs[1].val()));           });       $(trs[1]).bind("blur",function(){                trs[2].val(parseFloat(trs[0].val())-parseFloat(trs[1].val()));           });       $(trs[1]).bind("blur",function(){                trs[2].val(parseFloat(trs[0].val())-parseFloat(trs[1].val()));           }); $(trs[2]).bind("blur",function(){                trs[1].val(parseFloat(trs[0].val())-parseFloat(trs[2].val()));           }); $(trs[2]).bind("blur",function(){                trs[1].val(parseFloat(trs[0].val())-parseFloat(trs[2].val()));           }); $(trs[2]).bind("blur",function(){                trs[1].val(parseFloat(trs[0].val())-parseFloat(trs[2].val()));           });            });   /**************************tab2***********************/$("#tab2 tr").each(function(){        var trs=[];        var tr=$(this);        $(tr).find("input").each(function(){          trs.push($(this));           });        $(trs[1]).bind("blur",function(){                trs[2].val(parseFloat(trs[0].val())+parseFloat(trs[1].val()));     });     $(trs[1]).bind("blur",function(){                trs[2].val(parseFloat(trs[0].val())+parseFloat(trs[1].val()));     });     $(trs[1]).bind("blur",function(){                trs[2].val(parseFloat(trs[0].val())+parseFloat(trs[1].val()));     });     $(trs[2]).bind("blur",function(){                trs[1].val(parseFloat(trs[2].val())-parseFloat(trs[0].val()));     });     });/**************************tab3***********************/ $("#tab3 tr").each(function(){       var trs=[];       var tr=$(this);       $(tr).find("input").each(function(){       trs.push($(this));           });          $(trs[1]).bind("blur",function(){                trs[2].val(parseFloat(trs[0].val())*parseFloat(trs[1].val()));}); $(trs[1]).bind("blur",function(){                trs[2].val(parseFloat(trs[0].val())*parseFloat(trs[1].val()));}); $(trs[1]).bind("blur",function(){                trs[2].val(parseFloat(trs[0].val())*parseFloat(trs[1].val()));}); $(trs[2]).bind("blur",function(){                trs[1].val(parseFloat(trs[2].val())/parseFloat(trs[0].val()));}); $(trs[2]).bind("blur",function(){                trs[1].val(parseFloat(trs[2].val())/parseFloat(trs[0].val()));});$(trs[2]).bind("blur",function(){                trs[1].val(parseFloat(trs[2].val())/parseFloat(trs[0].val()));});   });        /**************************tab4***********************/ $("#tab4 tr").each(function(){       var trs=[];       var tr=$(this);      $(tr).find("input").each(function(){       trs.push($(this));           });    $(trs[0]).bind("blur",function(){                 trs[2].val(parseFloat(trs[0].val())/parseFloat(trs[1].val()));});      $(trs[0]).bind("blur",function(){                 trs[2].val(parseFloat(trs[0].val())/parseFloat(trs[1].val()));});     $(trs[0]).bind("blur",function(){                 trs[2].val(parseFloat(trs[0].val())/parseFloat(trs[1].val()));});  $(trs[2]).bind("blur",function(){                 trs[0].val(parseFloat(trs[1].val())*parseFloat(trs[2].val()));});  $(trs[2]).bind("blur",function(){                 trs[0].val(parseFloat(trs[1].val())*parseFloat(trs[2].val()));});$(trs[2]).bind("blur",function(){                 trs[0].val(parseFloat(trs[1].val())*parseFloat(trs[2].val()));});    });});  function add(a,b){return a+b;}function collection(){var a=['a','b','c'];for(var i=0;i<a.length;i++){alert(i+","+a[i]);}}/*$(document).ready(function(){ var a=1; var b=2; var c=add(a,b); alert(c); collection();});*/ </script></head><body><div id="1" class="1"><table>        <thead>            <tr>                <th>被减数</th>                <th>减数</th>                <th>差</th>            </tr>        </thead>        <tbody id="tab1">            <tr id="0">                <td><input type="text" value="40"/></td>                <td><input type="text" value=""/></td>                <td><input type="text" value=""/></td>            </tr>            <tr id="1">                <td><input type="text" value="50"/></td>                <td><input type="text" value=""/></td>                <td><input type="text" value=""/></td>            </tr>            <tr id="2">                <td><input type="text" value="60"/></td>                <td><input type="text" value=""/></td>                <td><input type="text" value=""/></td>            </tr>        </tbody>    </table> </div>     <div id="2" class="2">    <table>    <thead>            <tr>                <th>加数</th>                <th>加数</th>                <th>和</th>            </tr>        </thead>        <tbody id="tab2">            <tr id="0">                <td><input type="text" value="40"/></td>                <td><input type="text" value=""/></td>                <td><input type="text" value=""/></td>            </tr>            <tr id="1">                <td><input type="text" value="50"/></td>                <td><input type="text" value=""/></td>                <td><input type="text" value=""/></td>            </tr>            <tr id="2">                <td><input type="text" value="60"/></td>                <td><input type="text" value=""/></td>                <td><input type="text" value=""/></td>            </tr>        </tbody>    </table> </div> <div id="3" class="3"> <table>    <thead>            <tr>                <th>被乘数</th>                <th>乘数</th>                <th>积</th>            </tr>        </thead>        <tbody id="tab3">            <tr id="0">                <td><input type="text" value="40"/></td>                <td><input type="text" value=""/></td>                <td><input type="text" value=""/></td>            </tr>            <tr id="1">                <td><input type="text" value="50"/></td>                <td><input type="text" value=""/></td>                <td><input type="text" value=""/></td>            </tr>            <tr id="2">                <td><input type="text" value="60"/></td>                <td><input type="text" value=""/></td>                <td><input type="text" value=""/></td>            </tr>        </tbody>    </table> </div>  <div id="4" class="4"> <table>    <thead>            <tr>                <th>被除数</th>                <th>除数</th>                <th>商</th>            </tr>        </thead>        <tbody id="tab4">            <tr id="0">                <td><input type="text" value=""/></td>                <td><input type="text" value="20"/></td>                <td><input type="text" value=""/></td>            </tr>            <tr id="1">                <td><input type="text" value=""/></td>                <td><input type="text" value="25"/></td>                <td><input type="text" value=""/></td>            </tr>            <tr id="2">                <td><input type="text" value=""/></td>                <td><input type="text" value="11"/></td>                <td><input type="text" value=""/></td>            </tr>        </tbody>    </table> </div></body></html>
测试效果图

任意默认一个数值，输入一个数值另外一个随之计算结果。
计算输入改进

计算式通过事件处理之前判断输入框是否输入未输入则不进行计算，以规避NaN的出现。
0 0