jQuery plug in to achieve table interline color and mouse over the highlighting effect code

  • 2021-01-06 00:26:43
  • OfStack

In this paper, an example of jQuery plug-in to achieve table interrow color and mouse over the highlighting effect of the method. To share for your reference, the details are as follows:

This plug-in aims to achieve the table interrow color, and mouse over a table row, the row can be highlighted. The overall code is as follows:


<!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> The table changes color from row to row and mouse over highlights </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
*  use tableUI You can easily prompt the use of the table experience. The first features provided are alternating odd and even lines of color and mouse-over highlighting 
* Dependence jquery-1.7.1.js
*/ 
;(function($){
  $.fn.tableUI = function(options){ // Often use options It means it has a bunch of parameters  
  // Various properties, parameters    create 1 Some default values, extending any options provided 
  var defaults = {
    evenRowClass:"evenRow",
    oddRowClass:"oddRow",
    activeRowClass:"activeRow" 
    };
  var obj = $.extend(defaults,options);
  this.each(function(){ //this The keyword represents what the plug-in will execute jQuery object    There is no need to transfer this Wrapped in $ As in no. $(this) Because the this Is already 1 a jQuery Object.   $(this) Is equivalent to  $($('#element'));
    // Plug-in implementation code 
    var thisTable = $(this); // Get the current object    At this time this Keyword representation 1 a DOM The element    We can alert Print it out this Represents the object HTMLTableElement
    // Add odd-even line colors 
    $(thisTable).find("tr:even").addClass(obj.evenRowClass);
    $(thisTable).find("tr:odd").addClass(obj.oddRowClass);
    // Add the active row color 
    $(thisTable).find("tr").mouseover(function(){
      $(this).addClass(obj.activeRowClass);
      });
    $(thisTable).find("tr").mouseout(function(){
      $(this).removeClass(obj.activeRowClass);
      });
    });
  };
})(jQuery);
// In this closed program, we have unlimited access $ To indicate by notation jQuery Function. 
</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>

Readers who are interested in more jQuery related content can check out the special features of this site: jQuery Drag and drop effects and techniques summary, jQuery extension techniques summary, jQuery common classic effects summary, jQuery animation and effects usage summary, jquery selector method summary and jQuery common plugins and usage summary

I hope this article is helpful to jQuery program design.


Related articles: