jQuery Table tr 隔行换色小插件

2011-07-22未知33611Javascript & jQuery

在做项目的时候本来打算用上个文章那段代码来实现隔行换色的,但是总觉得还是不够方便。

于是就用jQuery。做一个隔行换色的插件放出来共享。

 

插件代码:

 (function($){
     $.fn.extend({
     "SetTableBgColor" : function(options){
         option = $.extend({
             Odd : "Odd", //奇数
             Even : "Even", //偶数
             Selected : "Selected", //选中
             Over : "Over" //鼠标移上去
         },options);  //此处options与function里的参数为同一个对象
         //隔行换色
         $("tbody > tr:even", this).addClass(option.Even);
         $("tbody > tr:odd", this).addClass(option.Odd);
         //鼠标移上去
         $("tbody > tr", this).mouseover(function(){
             if ($(this).hasClass(option.Selected) == false){
                 $(this).addClass(option.Over);
             }
         });
         //鼠标移出
         $("tbody > tr", this).mouseout(function(){
             $(this).removeClass(option.Over);
         });
         //单击变色
         $("tbody > tr", this).click(function(){
             $("tbody > tr").removeClass(option.Over);
             if ($(this).hasClass(option.Selected) == false){
                 $(this).addClass(option.Selected);
             }else{
                 $(this).removeClass(option.Selected);
             }
         });
    
         return this;
     }
     });
 })(jQuery);

 

 

HTML演示代码:

 

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script language="javascript" type="text/javascript" src="jquery.js"></script>
		<script language="javascript" type="text/javascript" src="ND_SetTableBgColor.js"></script>
		<script language="javascript" type="text/javascript">
			$(function() {
				$("#TableID").SetTableBgColor();
			});
		</script>
		<style type="text/css">
			* {
				font-size: 12px;
				font-family: Verdana;
			}
			.Odd {
				background: #fff;
				color: #666;
			}
			.Even {
				background: #fff8eb;
				color: #666;
			}
			.Selected {
				background: #fff3f3;
				color: #999;
			}
			.Over {
				background: #f5ffeb;
				color: #000;
			}
		</style>
			<table id="TableID" class="ke-zeroborder" border="0" cellspacing="1" cellpadding="6" width="100%" bgcolor="#dddddd">
				<tbody>
					<tr style="background:#f5f5f5;">
						<td width="20">
							<input type="checkbox" /> 
						</td>
						<td align="middle">
							11111
						</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" name="special_id[]" /> 
						</td>
						<td align="middle">
							11111
						</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" name="special_id[]" /> 
						</td>
						<td align="middle">
							11111
						</td>
					</tr>

					<tr>
						<td>
							<input type="checkbox" name="special_id[]" /> 
						</td>
						<td align="middle">
							11111
						</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" name="special_id[]" /> 
						</td>
						<td align="middle">
							11111
						</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="special_id[]" /></td>
						<td align="middle">11111</td>
					</tr>
				</tbody>
			</table>
jQuery 隔行换色  

3361

1

写评论

  昵称
  验证码