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

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
JQuery实现简单的图片滑动切换特效 headmeta http-equiv="Content-Type" content="text/html; charset=utf-8"/ titlet图片的滑动/title meta charset="utf-8" / style type="text/css" *{ margin:0; padding:0; } #main{ width:1089px; height:360px; margin:100px; background:url(../image/7.

基于jquery实现省市联动效果 - 2015-11-24 15:11:41

由于项目需要需要实现一个省市联动,由于业务有一些特殊的需求,使用现有的插件略有不便,就自己实现了一个。 首先需要保存地区数据的JS数据文件,我这里命名为areaData.js,内容如下: /** * 保存地区信息 * 数据格式 * areaData = [{'pro': '北京', 'cities': {'-1': '北京'}}, {...}] * 直辖市存在-1,表示就是直辖市 */ (function(window) { window.areaData = [{"pro":"\u5317\u4eac"
本文实例讲述了jquery实现表单验证代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下: 直接上插件实现代码了,围绕代码进行讲解比较容易点: /*描述:基于jquery的表单验证插件。*/(function ($) { $.fn.checkForm = function (options) { var root = this; //将当前应用对象存入root var isok = false; //控制表单提交的开关 var pwd1; //密码存储 var defaults =
Express: ?web application framework for?Node.js?Express 是一个简洁、灵活的 node.js Web 应用开发框架, 它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。 目录 此文重点介绍Express4.x(具体是4.10.4)的开发框架,其中还会涉及到Mongoose,Ejs,Bootstrap等相关内容。 建立工程 目录结构 Express4.x配置文件 Ejs模板使用 Bootstrap界面框架 路由功能 Session使用 页面
Nodejs是一个年轻的编程框架,充满了活力和无限激情,一直都在保持着快速更新。基于Nodejs的官方Web开发库Express也在同步发展着,每年升级一个大版本,甚至对框架底层都做了大手术。在Express4时,替换掉中件间库connect,而改用多个更细粒度的库来取代。带来的好处是明显地,这些中间件能更自由的更新和发布,不会受到Express发布周期的影响;但问题也是很的棘手,不兼容于之前的版本,升级就意味着要修改代码。 通过一段时间的查阅资料、摸索,我发现实现上传的方式有:1.express中间件m
本文实例讲述了jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法。分享给大家供大家参考,具体如下: 一、先描述下可以实现什么: 下拉框一改变,弹出框出现,选择弹出框中的值会赋值给下拉菜单 二、代码: html head meta http-equiv="Content-Type" content="text/html; charset=utf-8" titleSubscribe策略/title style type="text/css" * { margin: 0; padding: 0;} #b
本文实例讲述了js实现接收表单的值并将值拼在表单action后面的方法。分享给大家供大家参考,具体如下: 今天遇到一个问题,在form表单中有若干个input,其中有一个上传文件的input,现在需要在点击提交按钮时,将不是文件类型的input的值得到并拼成name=value的格式加在action后面,这样就能一同传出去了 form id="myform" name="myform" method="post" action="http://www.yoursiteweb.com:8080/justsy

Nodejs的express使用教程 - 2015-11-24 15:11:15

Express 是一个简洁、灵活的 node.js Web 应用开发框架, 它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。 1.express组织结构 app demo |---node_modules------用于安装本地模块。 |---public------------用于存放用户可以下载到的文件,比如图片、脚本、样式表等。 |---routes------------用于存放路由文件。 |---views-------------用于存放网页的模板。 |---app.js---

Bootstrap每天必学之表单 - 2015-11-24 15:11:59

本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容: 1.基本案例 2.内联表单 3.水平排列的表单 4.被支持的控件 5.静态控件 6.控件状态 7.控件尺寸 8.帮助文本 基本案例 单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的input、textarea和select元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排

简单谈谈AJAX核心对象 - 2015-11-24 15:11:54

Ajax是2005年2月才诞生但是现在已经炙手可热的一项全新技术.这项新技术能够极大地改善网站的用户体验. 什么是Ajax Ajax是异步Javascript和XML(Asynchronous JavaScript and XML)的英文缩写. Ajax的核心理念在于使用XMLHttpRequest对象发送异步请求.Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一起,共同的协作中发挥各自的作用. Ajax的优点 1.减轻服务器的负担.Ajax的原则是"按需取数据". 2.无需刷新页