信鸽网

jquery自定义表格样式

  作者：bea

本文实例讲述了jquery自定义表格样式实现代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 上面这张图有3种状态，默认状态（灰白相间），鼠标悬浮状态（绿色），鼠标点击状态（黄色），是如何实现的呐？ Html代码如下： <table> <thead> <tr> <td>编号</td> <td>姓名</td> <t

本文实例讲述了jquery自定义表格样式实现代码。分享给大家供大家参考。具体如下：
运行效果截图如下：



上面这张图有3种状态，默认状态（灰白相间），鼠标悬浮状态（绿色），鼠标点击状态（黄色），是如何实现的呐？
Html代码如下：




<table>

    <thead>

      <tr>

        <td>编号</td>

        <td>姓名</td>

        <td>年龄</td>

        <td>操作</td>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>1111</td>

        <td>1111</td>

        <td>1111</td>

        <td><input type="button" value="查看" /><input type="button" value="删除" /></td>

      </tr>

      <tr>

        <td>2222</td>

        <td>2222</td>

        <td>2222</td>

        <td><input type="button" value="查看" /><input type="button" value="删除" /></td>

      </tr>

      <tr>

        <td>3333</td>

        <td>3333</td>

        <td>3333</td>

        <td><input type="button" value="查看" /><input type="button" value="删除" /></td>

      </tr>

      <tr>

        <td>4444</td>

        <td>4444</td>

        <td>4444</td>

        <td><input type="button" value="查看" /><input type="button" value="删除" /></td>

      </tr>

      <tr>

        <td>5555</td>

        <td>5555</td>

        <td>5555</td>

        <td><input type="button" value="查看" /><input type="button" value="删除" /></td>

      </tr>

    </tbody>

</table>


插件实现代码如下：




(function () {

      $.fn.TabStyle = function (options) {



        //默认参数设置

        var settings = {

          evenClass: "tab_even",   //偶数行样式

          oddClass: "tab_odd",    //奇数行样式

          hoverClass: "tab_hover",  //鼠标悬浮样式

          clickClass: "tab_click",  //鼠标点击样式

          isClick: true        //是否开启鼠标点击样式

        };



        //合并参数

        $.extend(settings, options);



        return this.each(function () {

          //为奇偶行分别添加样式

          $(" > tbody > tr:even", this).addClass(settings.evenClass);

          $(" > tbody > tr:odd", this).addClass(settings.oddClass);





          $(" > tbody > tr", this).each(function (i) {

            //鼠标悬浮样式

            $(this).hover(function () {

              $(this).addClass(settings.hoverClass);

            }, function () {

              $(this).removeClass(settings.hoverClass);

            });

            //鼠标点击样式

            if (settings.isClick) {

              $(this).bind("click", function () {

                $(this).addClass(settings.clickClass).siblings("tr").removeClass(settings.clickClass);

              });

            }

          });

        });

      }

})();


有些时候我们可能并不需要鼠标点击后的样式，因此设置了isClick这个作为控制开关。如果不想要点击样式，将其设置为false即可。
DEMO如下：




<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title>表格样式（银光棒）</title>

  <style type="text/css">

    table{ width:700px; border:1px solid green;border-collapse:collapse;}

    table td{height:40px; text-align:center; width:25%;}

    

    .tab_even{ background-color: #DDD;}

    .tab_odd{ background-color: White;}

    .tab_hover{ background-color: Green;color:White;}

    .tab_click{ background-color: Orange;}

  </style>

</head>

<body>

  <table>

    <thead>

      <tr>

        <td>编号</td>

        <td>姓名</td>

        <td>年龄</td>

        <td>操作</td>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>1111</td>

        <td>1111</td>

        <td>1111</td>

        <td><input type="button" value="查看" /><input type="button" value="删除" /></td>

      </tr>

      <tr>

        <td>2222</td>

        <td>2222</td>

        <td>2222</td>

        <td><input type="button" value="查看" /><input type="button" value="删除" /></td>

      </tr>

      <tr>

        <td>3333</td>

        <td>3333</td>

        <td>3333</td>

        <td><input type="button" value="查看" /><input type="button" value="删除" /></td>

      </tr>

      <tr>

        <td>4444</td>

        <td>4444</td>

        <td>4444</td>

        <td><input type="button" value="查看" /><input type="button" value="删除" /></td>

      </tr>

      <tr>

        <td>5555</td>

        <td>5555</td>

        <td>5555</td>

        <td><input type="button" value="查看" /><input type="button" value="删除" /></td>

      </tr>

    </tbody>

  </table>

  <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

  <script src="../Scripts/jquery.similar.TabStyle.js" type="text/javascript"></script>

  <script type="text/javascript">

    $("table").TabStyle();

  </script>

</body>

</html>


通过上文详细的代码，大家应该会利用jquery自定义表格样式了，小编的表格样式还不够完美，还需要进行改进，希望大家在完成这个样式的基础上，继续创新，做一个属于自己的表格。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: