<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even { background:#FFF38F;}/* 偶数行样式*/
.odd { background:#FFFFEE;}/* 奇数行样式*/
.selected { background:#FF6500;color:#fff;}
</style>
<!-- 引入jQuery -->
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//表格隔行换色
;(function($) {
$.fn.extend({
"alterBgColor":function(options){
//设置默认值
options=$.extend({
odd:"odd", /* 偶数行样式*/
even:"even", /* 奇数行样式*/
selected:"selected" /* 选中行样式*/
},options);
$("tbody>tr:odd",this).addClass(options.odd);
$("tbody>tr:even",this).addClass(options.even);
$('tbody>tr',this).hover(function() {
//判断当前是否选中
var hasSelected=$(this).hasClass(options.selected);
//如果选中，则移出selected类，否则就加上selected类
//$(this)[hasSelected?"removeClass":"addClass"](options.selected)
if(!hasSelected)
$(this).addClass(options.selected);
},
function(){
//判断当前是否选中
var hasSelected=$(this).hasClass(options.selected);
if(hasSelected)
$(this).removeClass(options.selected);
});
return this; //返回this，使方法可链。
}
});
})(jQuery);
//插件应用
$(function(){
$("#table2").alterBgColor({event:"even",odd:"odd",selected:"selected"});
})
</script>
</head>
<body>
<table id="table2">
<thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
</body>
</html>
浙公网安备 33010602011771号