Jquery之事件绑定(bind)实现加减乘除运算_利用事件结构做一个加减乘除-优快云博客

本文链接：https://blog.youkuaiyun.com/boonyaxnn/article/details/52627300

这篇博客介绍了如何利用Jquery的bind方法进行事件绑定，实现表格输入框内的加减乘除运算。作者提供了事件绑定的语法示例，并展示了结合Html和Jquery代码的实践操作，通过示例展示计算过程，同时分享了如何改进输入判断以避免出现NaN的计算结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本实例采用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>