jquery自定义表格样式


Posted in Javascript onNovember 23, 2015

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

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

Javascript 相关文章推荐
jquery 分页控件实现代码
Nov 30 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
详解AngularJS之$window窗口对象
Jan 17 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
jquery实现表单验证简单实例演示
Nov 23 #Javascript
JavaScript与HTML的结合方法详解
Nov 23 #Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 #Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 #Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 #Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 #Javascript
Bootstrap每天必学之表单
Nov 23 #Javascript
You might like
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
js 触发select onchange事件代码
2014/03/20 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
解读Python中degrees()方法的使用
2015/05/18 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
Django  ORM 练习题及答案
2019/07/19 Python
python多线程并发及测试框架案例
2019/10/15 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
pandas数据处理之绘图的实现
2020/06/15 Python
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
个人找工作求职简历的自我评价
2013/10/20 职场文书
总经理助理的八要求
2013/11/12 职场文书
客房主管岗位职责
2013/12/09 职场文书
军训考核自我鉴定
2014/02/13 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
邀请书模板
2015/02/02 职场文书
预备党员考察意见范文
2015/06/01 职场文书
创业计划书之面包店
2019/09/12 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
JavaCV实现照片马赛克效果
2022/01/22 Java/Android