表格美化

      我在开发CRM系统的时候，我们客服人员提出了一个这样的问题：表格内容太宽，拖动滚动条到另一边就分不清自己看的是哪一行了。

      于是我在网站找了很多解决方法，将其一结合JQuery进行改造后，代码如下：

JS代码：

/*表格行交叉样式JS，需要在使用该JS的页面定义相应的样式（.eee;.ddd;.on;.click;）文字链接的样式也要根据这些样式选择合适的颜色定义*/
function CrossCss(obj) {
    obj.find("tr:even").addClass("eee");
    obj.find("tr:odd").addClass("ddd");

    $.each(obj.find("tr"), function () {
        $(this).hover(function () {
            $(this).addClass("on");
        }, function () {
            $(this).removeClass("on");
        });

        $(this).click(function () {
            obj.find("tr").removeClass("click");
            $(this).addClass("click");
        });
    });
}

然后在你要美化表格的页面定义你想要的样式，如下:

<style type="text/css">
        /*奇数行样式*/
        .eee
        {
            background: #eee;
        }
        /*偶数行样式*/
        .ddd
        {
            background: #ddd;
        }
        /*鼠标经过样式*/
        .on
        {
            background: #c4c4ff;
        }
        /*鼠标点击样式*/
        .click
        {
            background: #333;
            color: #fff;
        }
    </style>

 

在页面初始化的时候执行JS定义的方法：

<script type="text/javascript">
        $(function () {
            //调用JS方法，TableID是你想要美化的表格ID
            CrossCss($("#PageTypeList"));
        });
   </script>

 

这样，你的表格就会很漂亮了，由于表格太宽，拖到另一边后不记得是哪一行的问题也解决了。效果图如下:

 

这里的JS和CSS可以封装起来，用起来就更方便了。不知道有没有更好的方法，期待高手的指点。