Jquery implements alternating table color changes when the mouse moves over the color change example

Jquery implements alternating table colors. Click to select a row and move the mouse over the color change effect as follows:
Source code (Demo) package download
html code is as follows:

Copy code The code is as follows:

align="center" cellpadding="0" cellspacing="1" bgcolor="#c0de98">

table-row-1.0.js

复制代码代码如下:

 
$(document).ready(function(){ 
///////Datagrid selected row changes color and mouse passes over the row /////////////// / 
var dtSelector = ".list"; 
var tbList = $(dtSelector); 

tbList.each(function() { 
var self = this; 
$( "tr:even:not(:first)", $(self)).addClass("normalEvenTD"); // Odd-numbered lines starting from the next line of the header line, number of lines: (1, 3, 5... ) 
$("tr:odd", $(self)).addClass("normalOddTD"); // Even-numbered lines starting from the next line of the header line, number of lines: (2, 4, 6... ) 

//The line the mouse passes over changes color
$("tr:not(:first)", $(self)).hover( 
function () { $(this).addClass ('hoverTD');$(this).removeClass('table-td-content'); }, 
function () { $(this).removeClass('hoverTD');$(this).addClass( 'table-td-content'); } 
); 

//Select row changes color
$("tr", $(self)).click(function (){ 
 var trThis = this; 
$(self).find(".trSelected").removeClass('trSelected'); 
if ($(trThis).get(0) == $("tr:first ", $(self)).get(0)){ 
return; 
} 
$(trThis).addClass('trSelected'); 
}); 
}); 
}); 

Related labels：

表格颜色交替变化

source：php.cn

Previous article：Introduction to JavaScript custom events_javascript skills Next article：Jquery imitates Taobao Jingdong multi-condition filtering and can be combined with ajax loading example_jquery

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

标题	标题	标题	标题
数据	数据	数据	数据
数据	数据	数据	数据
数据	数据	数据	数据
数据	数据	数据	数据
数据	数据	数据	数据
数据	数据	数据	数据
数据	数据	数据	数据
数据	数据	数据	数据
数据	数据	数据	数据
数据	数据	数据	数据
数据	数据	数据	数据
数据	数据	数据	数据

Jquery implements alternating table color changes when the mouse moves over the color change example_jquery