jQuery插件表格实例
<html>
<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:1pxsolid #333;}
.tth{color:red;}/* 标题样式*/
.even{ background:#FFF38F;} /* 偶数行样式*/
.odd{ background:#FFFFEE;} /* 奇数行样式*/
.selected{ background:#FF6500;color:#fff;}
</style>
<script src="../jquery/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
$.fn.extend({
"alterBgColor":function(options){
options=$.extend({
tth:"tth",/*标题样式*/
odd:"odd",/* 偶数行样式*/
even:"even", /* 奇数行样式*/
selected:"selected" /* 选中行样式*/
},options);
$("th",this).addClass(options.tth);
$("tbody>tr:odd",this).addClass(options.odd);
$("tbody>tr:even",this).addClass(options.even);
$('tbody>tr',this).click(function(){
var hasSelected=$(this).hasClass(options.selected);
$(this)[hasSelected?"removeClass":"addClass"](options.selected)
.find(':checkbox').attr('checked',!hasSelected);
});
// 如果单选框默认情况下是选择的，则高色.
$('tbody>tr:has(:checked)',this).addClass(options.selected);
return this;
}
});
})(jQuery);
//插件应用
$(function(){
$("#table2").alterBgColor();
})
</script>
</head>
<body>
<table id="table1">
<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>孙七</td>
<td>男</td>
<td>上海黄浦</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>周八</td>
<td>女</td>
<td>上海松江</td>
</tr>
</tbody>
</table>
<br /><br />
<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>孙七</td>
<td>男</td>
<td>上海黄浦</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>周八</td>
<td>女</td>
<td>上海松江</td>
</tr>
</tbody>
</table>
</body>
</html>