自己编写一个JQuery插件(案例)-罗分明网络博客

主要功能光标移到哪行哪行变色，其它的为默认色

手写的JQuery在JQuery.TableStyle.js这个文件里面

注意引用JS顺序

html文件代码为

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/JQuery.TableStyle.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#setTable').click(function () {
                $('#t1').setTableStyle();
            });
            $('#clearTable').click(function () {
                $('#t1').clearTableStyle();
            });
        })
    </script>
</head>
<body>
    <input type="button" id="setTable" value="设置 style" />
    <input type="button" id="clearTable" value="去除 style" />
    <table id="t1" border="1" cellpadding="2" cellspacing="2">
        <tr>
            <td>罗分明</td>
            <td>罗分明</td>
            <td>罗分明</td>
            <td>罗分明</td>
            <td>罗分明</td>
            <td>罗分明</td>
        </tr>
        <tr>
            <td>罗分明</td>
            <td>罗分明</td>
            <td>罗分明</td>
            <td>罗分明</td>
            <td>罗分明</td>
            <td>罗分明</td>
        </tr>
        <tr>
            <td>罗分明</td>
            <td>罗分明</td>
            <td>罗分明</td>
            <td>罗分明</td>
            <td>罗分明</td>
            <td>罗分明</td>
        </tr>
    </table>
</body>
</html>

以下是JQuery.TableStyle.js里面的代码

; (function ($) {
    $.fn.extend({
        setTableStyle: function () {
            $('tr', this).mouseover(function () {
                $(this).css('backgroundColor', 'blue').siblings().css('backgroundColor','');
            });
        },
        clearTableStyle: function () {
            $('tr', this).unbind().removeAttr('style');
        }
    });
})(jQuery)