<script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>

<table class='mainTable' id='tbl'>

<tr><td>1</td><td>2</td><td>3</td></tr>

<tr><td>1</td><td>2</td><td>3</td></tr>

<tr><td>1</td><td>2</td><td>3</td></tr>

</table>

<script>

$(function(){

/* 非插件实现行背景高亮

$('.mainTable tr').mouseover(function(){

		$(this).css('backgroundColor','yellow').siblings().css('backgroundColor','white');

});

*/

$('.mainTable').setTableColor();

});

////自己实现jquery插件（可单独放到js文件中）：

/*

* 鼠标放table行上背景高亮

* 插件的使用：$('#tbleId').setTableColor();

*/

;(function($){//为了把前面代码视为一个整体故第一个字符是分号，$是jquery对象。

	//注意：$.fn.extend()里面以“key-value”形式写函数

	$.fn.extend({

		setTableColor:function(){//行背景高亮函数

			$('tr',this).mouseover(function(){//this是table对象

				$(this).css('backgroundColor','#F2F4FF').siblings().css('backgroundColor','white');//this是表行

			});

			return this;//本句为了能链式编程

		}

	});

})(jQuery);

</script>