Ronnie 猫's 一亩三分地

关注前端技术,一直走在追随前端的路上…For Long Time

jQuery插件开发—-表格美化

很多时候在表格上需要做隔行换色,鼠标移上某行高亮,为了不需要每次都做很多样式,决定自己做一个简单的jquery插件,顺便再次学习jquery插件的开发。

HTML结构 和 CSS样式代码如下:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>table</title>
<style>
table {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
table thead th {
border: 1px solid #ccc;
border-bottom: none;
border-right: none;
padding: 4px 3px 2px 4px;
background: #FFCCCC;
}
table tbody td {
border: 1px solid #ccc;
border-bottom: none;
border-right: none;
padding: 4px 3px 2px 4px;
}
</style>
</head>
<body>
<table cellpadding=”0″ cellspacing=”0″>
<thead>
<tr>
<th>title 1</th>
<th>title 2</th>
<th>title 3</th>
<th>title 4</th>
<th>title 5</th>
<th>title 6</th>
<th>title 7</th>
</tr>
</thead>
<tbody>
<tr>
<td>content line1 col 1</td>
<td>content line1 col 2</td>
<td>content line1 col 3</td>
<td>content line1 col 4</td>
<td>content line1 col 5</td>
<td>content line1 col 6</td>
<td>content line1 col 7</td>
</tr>
<tr>
<td>content line2 col 1</td>
<td>content line2 col 2</td>
<td>content line2 col 3</td>
<td>content line2 col 4</td>
<td>content line2 col 5</td>
<td>content line2 col 6</td>
<td>content line2 col 7</td>
</tr>
<tr>
<td>content line3 col 1</td>
<td>content line3 col 2</td>
<td>content line3 col 3</td>
<td>content line3 col 4</td>
<td>content line3 col 5</td>
<td>content line3 col 6</td>
<td>content line3 col 7</td>
</tr>
<tr>
<td>content line4 col 1</td>
<td>content line4 col 2</td>
<td>content line4 col 3</td>
<td>content line4 col 4</td>
<td>content line4 col 5</td>
<td>content line4 col 6</td>
<td>content line4 col 7</td>
</tr>
<tr>
<td>content line5 col 1</td>
<td>content line5 col 2</td>
<td>content line5 col 3</td>
<td>content line5 col 4</td>
<td>content line5 col 5</td>
<td>content line5 col 6</td>
<td>content line5 col 7</td>
</tr>
<tr>
<td>content line6 col 1</td>
<td>content line6 col 2</td>
<td>content line6 col 3</td>
<td>content line6 col 4</td>
<td>content line6 col 5</td>
<td>content line6 col 6</td>
<td>content line6 col 7</td>
</tr>
<tr>
<td>content line7 col 1</td>
<td>content line7 col 2</td>
<td>content line7 col 3</td>
<td>content line7 col 4</td>
<td>content line7 col 5</td>
<td>content line7 col 6</td>
<td>content line7 col 7</td>
</tr>
</tbody>
</table>
</body>
</html>

 

在head部分引入jquery当前版本。<script src=”jquery.min.js”></script>

具体插件代码如下

/**
* @author Ronnie
*/
/*
*
*使用闭包 (function($){})(jQuery)
* $.fn.tableUI 插件名
* 调用时用
* $(element).tableUI({可选参数});
* over:鼠标移上行时采用样式;
* odd,even 隔行换色样式
*
*
*
*/
(function($){
$.fn.tableUI= function(options){
var defaults = {
over:”mouseover”,
odd:”odd”,
even:”even”
}
var opts = $.extend({}, defaults, options);

return this.each(function(){
var _this = $(this);
_this.find(“tbody tr:odd”).addClass(opts.odd);
_this.find(“tbody tr:even”).addClass(opts.even);
_this.find(“tbody tr”).bind(“mouseover”,function(){
$(this).addClass(“mouseover”);
})
_this.find(“tbody tr”).bind(“mouseout”,function(){
$(this).removeClass(“mouseover”);
})
})
}
})(jQuery);

 

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google+ photo

You are commenting using your Google+ account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s