《js代码例子》
;(function($){
$.fn.table = function(options){
var defaults = {
"odd": "red",
"even":"blue"
}
var options = $.extend(defaults,options);
this.each(function(){
var _this = $(this)
_this.find("tr:odd").css({
background:options.odd
})
_this.find("tr:even").css({
background:options.even
})
})
return this
}
})(jQuery)
《html代码例子》
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/center1.2.js"></script>
<style type="text/css">
table {
table-layout: fixed;
empty-cells: show;
border-collapse: collapse;
margin: 0 auto;
font-size: 30px;
}
.table {
border: 1px solid #cad9ea;
color: #666;
}
.table td{
height: 40px;
width: 100px;
border: 1px solid #cad9ea;
text-align: center;
color: ghostwhite;
}
</style>
</head>
<body>
<table class="table">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
</table>
<script type="text/javascript">
$(".table").table()
</script>
</body>
</html>