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 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 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
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
php json转换相关知识(小结)
2018/12/21 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Python编写登陆接口的方法
2017/07/10 Python
Python遍历pandas数据方法总结
2018/02/09 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
Python基于locals返回作用域字典
2020/10/17 Python
几款好用的python工具库(小结)
2020/10/20 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
汉森批发:Hansen Wholesale
2018/05/24 全球购物
名企HR怎样看待求职信
2014/02/23 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
建议书的格式
2014/05/12 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书