侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 143972 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

jequery笔记 插件之表格隔行变色简单插件

2023-09-06 星期三 / 0 评论 / 0 点赞 / 14 阅读 / 1985 字

html代码<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loo

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



广告 广告

评论区