jquery自定义表格样式

2019-11-20 11:11:42

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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自定义表格样式了，小编的表格样式还不够完美，还需要进行改进，希望大家在完成这个样式的基础上，继续创新，做一个属于自己的表格。

上一篇：jquery实现图片放大镜功能

下一篇：jquery实现表单验证简单实例演示