jquery自定义表格样式

2024-10-20 20:43:43

本文实例讲述了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操作HTML的table表格的实例解析

最终效果图: 简单来看一下其中的主要部分: HTML: .td_back_color { background-color: red; } .td_center { text-align: center; font-weight:bold; } CSS: <table id="tbl_count"> <caption>2013春节聚会收支统计</caption> <tr> <th>姓名</th> <th>
jquery实现表格隔行换色效果

本文实例讲述了jquery实现表格隔行换色效果的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 1.新建一个web项目,jQuery: 2.在WebContent目录下新建script文件夹,将jquery-1.10.1.js复制到script中: 3.同样,新建TableColor.html: TableColor.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
jquery调整表格行tr上下顺序实例讲解

表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能,分享给大家供大家参考,具体内容如下代码实例如下: <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</t
jQuery实现的调整表格行tr上下顺序

表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>我们<
基于jquery实现表格无刷新分页

本文实例讲解了基于jquery实现表格无刷新分页功能,分享给大家供大家参考,具体内容如下效果图: 具体代码: <html> <head> <title>面向对象的无刷新表格分页</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <link rel="stylesheet" hre
jQuery实现获取table表格第一列值的方法

本文实例讲述了jQuery实现获取table表格第一列值的方法.分享给大家供大家参考,具体如下: 先来看看运行效果截图: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="http://www.w3.or
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码

本文实例讲述了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果的方法.分享给大家供大家参考,具体如下: 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm
基于jQuery实现点击最后一行实现行自增效果的表格

现在任何事务都追求效率和人性化,当然网页效果也是如此,如果一个可以编辑数据的表格,编辑到最后一行的时候,点击可以自动添加一行,这样算是一个比较人性化的效果,可以免去一丝劳顿之苦,下面分享一段这样的代码. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.j
基于jQuery实现的无刷新表格分页实例

本文实例讲述了基于jQuery实现的无刷新表格分页.分享给大家供大家参考,具体如下: 效果图如下: html结构: <table id="cs_table" class="datatable"></table> css样式: html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, th, td {font: 12px Arial,Helvetica
jQuery操作表格（table）的常用方法、技巧汇总

以下列出13个jQuery操作table常用到的功能: 1.鼠标移动行变色复制代码代码如下: $('#table1 tr').hover(function(){ $(this).children('td').addClass('hover')}, function(){ $(this).children('td').removeClass('hover')}); 方法二: 复制代码代码如下: $("#table1 tr:gt(0)").hover(function()

jquery自定义表格样式

相关推荐

随机推荐