新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

此插件旨在实现表格隔行变色

jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码,jquery高亮展现

正文实例汇报了jQuery插件达成表格隔行变色及鼠标滑过高亮展现效果的主意。分享给我们供大家仿效,具体如下:

此插件目的在于贯彻表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮呈现。全体代码如下:

<!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.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格隔行变色且鼠标滑过高亮显示</title>
<style>
table{border-collapse:collapse;border:none;width:20%;}
table tr td{border:1px solid #ccc;text-align:center;cursor:pointer;}
.evenRow{background:#f0f0f0;}
.oddRow{background:#ff0;}
.activeRow{background:#f00;color:#fff;}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
</head>
<body>
<script>
/*
* tableUI 0.1
* 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替,鼠标移上高亮显示
* Dependence jquery-1.7.1.js
*/ 
;(function($){
  $.fn.tableUI = function(options){ //经常用options表示有许多个参数 
  //各种属性、参数  创建一些默认值,拓展任何被提供的选项
  var defaults = {
    evenRowClass:"evenRow",
    oddRowClass:"oddRow",
    activeRowClass:"activeRow" 
    };
  var obj = $.extend(defaults,options);
  this.each(function(){ //this关键字代表了这个插件将要执行的jQuery对象  此处没有必要将this包在$号中如$(this),因为this已经是一个jQuery对象。  $(this)等同于 $($('#element'));
    //插件实现代码
    var thisTable = $(this); //获取当前对象  此时this关键字代表一个DOM元素  我们可以alert打印出此时的this代表的是object HTMLTableElement
    //添加奇偶行颜色
    $(thisTable).find("tr:even").addClass(obj.evenRowClass);
    $(thisTable).find("tr:odd").addClass(obj.oddRowClass);
    //添加活动行颜色
    $(thisTable).find("tr").mouseover(function(){
      $(this).addClass(obj.activeRowClass);
      });
    $(thisTable).find("tr").mouseout(function(){
      $(this).removeClass(obj.activeRowClass);
      });
    });
  };
})(jQuery);
//在这个封闭程序中,我们可以无限制的使用$符号来表示jQuery函数。
</script>
<table cellpadding="0" cellspacing="0">
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
$(function(){
  $("table").tableUI();
  })
</script>
</body>
</html>

更加多关于jQuery相关内容感兴趣的读者可查看本站专项论题:《jQuery拖拽特效与本领总计》、《jQuery增加才能总计》、《jQuery常见卓绝特效汇总》、《jQuery动画与特功用法总括》、《jquery选取器用法总括》及《jQuery常用插件及用法总计》

目的在于本文所述对大家jQuery程序设计有所支持。

您只怕感兴趣的作品:

  • 用JQuery达成表格隔行变色和优秀体现当前行的代码
  • jQuery 表格隔行变色代码[核查注释版]
  • jQuery完成轻松隔行变色的办法
  • jQuery隔行变色与一般JS写法的比较
  • 依据jQuery的的多少个隔行变色,鼠标移动变色的小插件
  • jQuery 行背景颜色的轮换展现(隔行变色)达成代码
  • JQuery文本框高亮展现插件代码
  • jquery完成带复选框的报表行选中去除时高亮展现
  • jquery落成带单选开关的表格行选中时高亮呈现
  • JQuery操作表格(隔行着色,高亮展现,筛选数据)

本文实例陈说了jQuery插件达成表格隔行变色及鼠标滑过高亮显示效...

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于www.301net,转载请注明出处:此插件旨在实现表格隔行变色

您可能还会对下面的文章感兴趣: