jequery筆記插件之表格隔行變色簡單插件

時間 2019-11-20

標籤 jequery 筆記插件表格隔行變色簡單简体版

原文原文鏈接

html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type=text/javascript src="../../jquery-1.3.1.js"></script>
<script type=text/javascript src="demo.js"></script>
<script>
  $(function(){
	$('#table').tab();
});
</script>
<style>
	.even{background-color:#ffff00;}
	.odd{background-color:#0000ff;}
	.current{background-color:#000000;}
</style>
</head>
<body>
<table width="200" border="1" id="table">
    <tr>
        <td>fgdgfd</td>
        <td>dfgdfg</td>
    </tr>
    <tr>
        <td>dgfdgfd</td>
        <td>gdgdfgd</td>
    </tr>
</table>
</body>
</html>

插件代碼:
//jquery 插件

(function($){
  
	$.fn.tab=function(options){
	  var defaults={
		//各類參數	 
		 evenRowClass:'even',
		 oddRowClass:'odd',
		 currentRowClass:'current',
		 eventType1:'mouseover',
		 eventType2:'mouseout'
	  }
	  //將default的參數整合至對象裏
	  var options=$.extend(defaults,options);
	  
	  this.each(function(){
		  //實現功能代碼
		  $(this).find('tr:even').addClass(options.evenRowClass);
		  
		  $(this).find('tr:odd').addClass(options.oddRowClass);
            //鼠標的移入和移出		  
		  /*$(this).find('tr').mouseover(function(){
			  $(this).addClass(options.currentRowClass);
		  });
		  $(this).find('tr').mouseout(function(){
			  $(this).removeClass(options.currentRowClass);
		  });*/
		  
		 $(this).find('tr').bind(options.eventType1,function(){
			
			 $(this).addClass(options.currentRowClass); 
		 });
		 
		 $(this).find('tr').bind(options.eventType2,function(){
				
			 $(this).removeClass(options.currentRowClass); 
		 });
	  });
  }
})(jQuery);