代码改变世界

（原创）简单 jQuery 插件让 Table 中的 Tr 实现光棒效果

2012-07-06 19:05  音乐让我说  阅读(633)  评论(0)  编辑  收藏  举报

该插件是我大约 2 年前在上一家公司时写的，由于时间比较仓促，没有以 jQuery 插件的方式而已，想着等着有时间了，再来完善。后来不知不觉就忘记了，今天由于项目需要，就重新拿出来，完善了一下。PS：本人不是搞前端的，但比较热爱前端，上一家公司由于没有招聘前端开发工程师，一些 Javascript 特效我就代劳了。本插件是一个轻量级插件，很简单，主要是为了让一个 Table 里面的 Tr 实现光棒效果，即鼠标移上去和移出来变换颜色，并且支持全选、选中单个时，颜色保留，不随着鼠标的移出而退色。

演示开始（注意：需要网页完全加载！）：

ID标题
1 Hello World
2 博客园
3 音乐让我说 - 博客园（http://music.cnblogs.com）
4 程序猿上辈子都是补不完的 Bug

演示结束！

Html 案例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>测试光棒效果</title>
    <style type="text/css">
        .tab_0{ width:100%; border:1px solid #ddd; }
        .tab_0 th{ background:#3698c5; padding:5px 10px; font-size:14px; font-weight:bold; color:#fff; border:1px solid #ddd; }
        .tab_0 td{ border:1px solid #ddd; padding:5px 10px; }
        .rowmouseover { background-color:#eff8ff; }
        .rowmouseout { background-color:White; }
    </style>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-table-row-light-by-bruce.js"></script>
    <script type="text/javascript">
        jQuery.tableRowLight({ checkAllId : "chkCheckAll_ByBruce" });
    </script>
</head>
<body>
<!-- 原创，转载请注明（音乐让我说 - 博客园  Http://music.cnblogs.com），谢谢！ -->
<table class="tab_0">
    <tr>
        <th>
            <input type="checkbox" id="chkCheckAll_ByBruce"/><label for="chkCheckAll_ByBruce">全选</label>
        </th>
        <th>
            ID
        </th>
        <th>
            标题
        </th>
    </tr>
    <tbody>
        <tr class="trItem">
            <td>
                <input type="checkbox" name="chkId" value="1" />
            </td>
            <td>
                1
            </td>
            <td>
                Hello World
            </td>
        </tr>
        <tr class="trItem">
            <td>
                <input type="checkbox" name="chkId" value="2" />
            </td>
            <td>
                2
            </td>
            <td>
                博客园
            </td>
        </tr>
        <tr class="trItem">
            <td>
                <input type="checkbox" name="chkId" value="3" />
            </td>
            <td>
                3
            </td>
            <td>
                音乐让我说 - 博客园（http://music.cnblogs.com）
            </td>
        </tr>
        <tr class="trItem">
            <td>
                <input type="checkbox" name="chkId" value="4" />
            </td>
            <td>
                4
            </td>
            <td>
                程序猿上辈子都是补不完的 Bug
            </td>
        </tr>
    </tbody>
</table>
</body>
<!-- 原创，转载请注明（音乐让我说 - 博客园  Http://music.cnblogs.com），谢谢！ -->
</html>

 

jQuery 插件代码：

/*

该插件是我大约 2 年前在上一家公司时写的，由于时间比较仓促，没有以 jQuery 插件的方式而已，想着等着有时间了，再来完善。
后来不知不觉就忘记了，今天由于项目需要，就重新拿出来，完善了一下。PS：本人不是搞前端的，但比较热爱前端，上一家公司
由于没有招聘前端开发工程师，一些 Javascript 特效我就代劳了。

今天的时间：2012-07-06

本插件是一个轻量级插件，很简单，主要是为了让一个 Table 里面的 Tr 实现光棒效果，即鼠标移上去和移出来变换颜色，
并且支持全选、选中单个时，颜色保留，不随着鼠标的移出而退色。

使用方法1：使用默认的参数

<script type="text/javascript">
    jQuery.tableRowLight(); 
</script>

使用方法2：变换“全选”复选框的 ID

<script type="text/javascript">
    jQuery.tableRowLight({ checkAllId : "chkCheckAll_ByBruce" });
</script>

请支持原创，转载请注明（音乐让我说 - 博客园  Http://music.cnblogs.com），谢谢！
QQ：403350327

*/


jQuery.extend({
    tableRowLight: function (options)
    {
        jQuery.tableRowLight.defaults = {
            rowItemClass : "trItem",  // 单个行的样式，仅仅是为了方便 jQuery 获取
            rowMouseOverClass : "rowmouseover",  // 鼠标移到 Table Row 上面时的样式
            rowMouseOutClass : "rowmouseout",  // 鼠标移出 Table Row 上面时的样式
            checkAllId : "chkCheckAll",  // 全选按钮的 ID
            checkItemName : "chkId"        // 单个复选框的 Name 值
        };
        var opts = jQuery.extend(jQuery.tableRowLight.defaults, options);

        ///初始化 Table Row 的光棒效果
        function InitRow()
        {
            jQuery("." + opts.rowItemClass).hover(
                function ()
                {
                    jQuery(this).removeClass(opts.rowMouseOutClass).addClass(opts.rowMouseOverClass);
                },
                function ()
                {
                    if (jQuery(this).data("myChecked") != true)
                    {
                        jQuery(this).removeClass(opts.rowMouseOverClass).addClass(opts.rowMouseOutClass);
                    }
                }
            );
        }

        ///初始化选中全部和选择某一项时，改变背景色
        function InitCheckRow()
        {
            jQuery("#" + opts.checkAllId).click(function ()
            {
                var currentIfSelected = isCheckBoxSelected(jQuery(this));

                jQuery("input[name='" + opts.checkItemName + "']").attr("checked", currentIfSelected);

                var jRowItem = jQuery("." + opts.rowItemClass).data("myChecked", currentIfSelected);
                if (currentIfSelected)
                {
                    jRowItem.removeClass(opts.rowMouseOutClass).addClass(opts.rowMouseOverClass);
                }
                else
                {
                    jRowItem.removeClass(opts.rowMouseOverClass).addClass(opts.rowMouseOutClass);
                }
            });
            jQuery("input[name='" + opts.checkItemName + "']").click(function ()
            {
                var currentIfSelected = jQuery(this).is(":checked");
                var ifNeedToSelectAll = false;
                if (currentIfSelected)
                {
                    //选中
                    ifNeedToSelectAll = true;
                    jQuery("input[name='" + opts.checkItemName + "']").each(function ()
                    {
                        if (jQuery(this).is(":checked") == false)
                        {
                            ifNeedToSelectAll = false;
                            return false;
                        }
                    });
                }
                jQuery("#" + opts.checkAllId).attr("checked", ifNeedToSelectAll);

                var jRowItem = jQuery(this).parent().parent().data("myChecked", currentIfSelected);
                if (currentIfSelected)
                {
                    jRowItem.removeClass(opts.rowMouseOutClass).addClass(opts.rowMouseOverClass);
                }
                else
                {
                    jRowItem.removeClass(opts.rowMouseOverClass).addClass(opts.rowMouseOutClass);
                }
            });
        }

        function isCheckBoxSelected(jqObj)
        {
            var value = jqObj.attr('checked');
            var isChecked = (value != undefined && (value == "checked" || value == true)) ? true : false;
            return isChecked;
        }

        jQuery(document).ready(function ()
        {
            InitRow();
            InitCheckRow();
        });
    }
});

 

谢谢浏览！