TMBlog技术文章分享

jquery是个非常锋利的武器,使得我们的前段开发很方便. jquery的口号也是很牛逼的 write less , do more .

这篇文章就来接着介绍下插件的实际使用案例. 表格隔行换色,并添加事件.

1.编写html代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery-mytable</title>

</head>
<body>
<table id="mytable">
	<thead>
		<tr>
			<td>标识</td>
			<td>姓名</td>
			<td>年龄</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>唐僧</td>
			<td>11</td>
		</tr>
		<tr>
			<td>2</td>
			<td>孙悟空</td>
			<td>22</td>
		</tr>
		<tr>
			<td>3</td>
			<td>猪八戒</td>
			<td>33</td>
		</tr>
		<tr>
			<td>4</td>
			<td>沙僧</td>
			<td>44</td>
		</tr>
		<tr>
			<td>5</td>
			<td>白龙马</td>
			<td>55</td>
		</tr>		
	</tbody>
</table>
</body>
</html>

2.给表格加上样式

<style type="text/css">
.mytable {
	border-spacing: 0px;
	border-left:1px solid #999;
	border-top:1px solid #999;
	font-size: 12px;
}
.mytable td {
	border-right:1px solid #999;
	border-bottom:1px solid #999;
	padding:10px 4px;
}
thead.headBg {
	background:#621;
	color:#fff;
}
tr.evenBg {
	background:#bbb;
}
tr.hoverBg {
	background:#484;
	color:#fff;
}
</style>

3.编写插件

//某些浏览器不支持Object.create,手动添加这个方法
if (typeof Object.create != "function") {
    Object.prototype.create = function(obj) {
        var F = function() {};
        F.prototype = obj;
        return new F();
    }
}
(function($, window, document) {
    var MyTable = {
        init: function(elem, options) {
            var self = this;
            self.options = $.extend({}, $.fn.mytable.options, options);
            self.elem = elem;
            self.$elem = $(elem);
            self.display(); //渲染表格
            self.addEvent();
        },
        display: function() {
            var self = this;
            self.$elem.addClass("mytable");
            self.$elem.css("width", self.options.width);
            if (self.options.headBg)
                self.$elem.find("thead").addClass("headBg");
            if (self.options.evenBg)
                self.$elem.find("tbody tr:even").addClass("evenBg");
            if (self.options.hoverBg) {
                self.$elem.find("tbody tr").hover(function() {
                    $(this).addClass("hoverBg");
                }, function() {
                    $(this).removeClass("hoverBg");
                });
            }
        },
        addEvent: function() {
            var self = this;
            if (typeof self.options.onComplete === "function" && self.options.onComplete) {
                //完成了对onComplete的调用，第一个参数是上下文，第二和第三个参数是共享给onComplete的参数
                self.options.onComplete.call(self.elem, self, self.$elem);
            }
            if (typeof self.options.onTdClick === "function" && self.options.onTdClick) {
                self.$elem.find("tbody tr td").on("click", { mt: self }, self.options.onTdClick);
            }
        }
    };

    $.fn.mytable = function(options) {
         var mt = Object.create(MyTable);
         mt.init(this, options);
        return mt;
    };
    /**
     * 自定义的options的常量
     */
    $.fn.mytable.options = {
        width: 700,
        headBg: true,
        evenBg: true,
        hoverBg: true,
        onComplete: null,
        onTdClick: null
    };
})(jQuery, window, document);

4.调用插件

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-mytable.js"></script>
<script type="text/javascript">
$(function(){
	$("#mytable").mytable({
		width:800,
		onComplete:function(mt,elem){
			//通过mt和elem可以有效的获取相应的参数，这个参数是在mytable内部
			console.log('onComplete',mt.options.width);
		},
		onTdClick:function(event) {
			var mt = event.data.mt;
			console.log('onTdClick',mt.options.width);
			console.log('onTdClick',$(this).html());
		}
	});
});
</script>

访问html,查看效果 QQ截图20170307132557.png

源代码: Jquery-mytable.zip