日期:2014-05-16  浏览次数:20721 次

jquery实现隔行变色,点击换色,鼠标悬浮当前行变色效果,div+css 细表格样式

jquery实现隔行变色,点击换色,鼠标悬浮当前行变色效果,离开恢复原色

。绿色为点击后的 颜色

。灰色为鼠标放上去的颜色


<script type="text/javascript">
    $(function () {
        //所有行
        _odd_even();
        $(".nlist_1s").each(function () {
            var _color = $(this).css("backgroundColor");
            $(this).hover(function () {
                if (parseInt($(this).attr("class").indexOf("checked")) == -1) {
                    $(this).css({ "backgroundColor": "#cccccc", "color": "black" });
                }
            }, function () {
                if (parseInt($(this).attr("class").indexOf("checked")) == -1) {
                    $(this).css({ "backgroundColor": _color, "color": "#535353" });
                }
            });
            $(this).click(function () {
                //所有行
                _odd_even();
                //当前行
                $(this).css({ "backgroundColor": "#479423", "color": "#ffffff" }).addClass("checked");
            });
        });
    });
    function _odd_even() {
        //偶数行 第一行为偶数0行
        $(".nlist_1s:odd").css({ "backgroundColor": "#E5F5FF", "color": "#535353" }).removeClass("checked");
        //奇数行
        $(".nlist_1s:even").css({ "backgroundColor": "transparent", "color": "#535353" }).removeClass("checked");
    }
</script>



。绿色为点击后的 颜色

。灰色为鼠标放上去的颜色