jQuery implémente le changement de couleur du tableau entrelacé et la mise en surbrillance du survol de la souris (code ci-joint)-js tutoriel-php.cn

jQuery implémente le changement de couleur du tableau entrelacé et la mise en surbrillance du survol de la souris (code ci-joint)

php中世界最好的语言

Libérer： 2018-04-24 09:50:39

original

2035 Les gens l'ont consulté

Cette fois, nous vous proposons l'implémentation jQuery du changement de couleur entrelacé de table et la surbrillance avec la souris (avec code), l'implémentation jQuery du changement de couleur entrelacé de table et la surbrillance avec la souris PrécautionsQue sont ils ? Voici des cas réels.

Ce plug-in est conçu pour changer la couleur de chaque ligne du tableau, et lorsque la souris se déplace sur une certaine ligne du tableau, la ligne peut être mise en surbrillance. Le code global est le suivant :

<!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>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Résumé de la méthode d'élément de tableau d'objet d'opération Jquery (avec cas)

Méthode grep() à implémenter filtre de tableau

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!