Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > Two ways to implement jQuery to change table color on alternate rows and change color after mouseover_jquery

Two ways to implement jQuery to change table color on alternate rows and change color after mouseover_jquery

WBOY

Release： 2016-05-16 16:44:36

Original

1392 people have browsed it

1. Change colors on alternate lines

Copy code The code is as follows:

 
$("tr:odd" ).css("background-color","#eeeeee"); 
$("tr:even").css("background-color","#ffffff"); 

Or do it in one line:

Copy the code The code is as follows:

$("table tr:nth -child(odd)").css("background-color","#eeeeee");

:nth-child matches the Nth child or odd-even element under its parent element

2. The mouse changes color

Copy the code The code is as follows:

 
$("tr ").live({ 
mouseover:function(){ 
$(this).css("background-color","#eeeeee"); 
}, 
mouseout:function() { 
$(this).css("background-color","#ffffff"); 
} 
}) 

Copy code The code is as follows:

 
$("tr").bind("mouseover",function(){ 
 $(this).css("background-color","#eeeeee"); 
}) 
$("tr").bind("mouseout",function(){ 
$(this ).css("background-color","#ffffff"); 
}) 

Of course, both live() and bind() can bind multiple events at the same time or separately.

Related labels：

Change colors every other line

source：php.cn

Previous article：jquery realizes the universal version of the mouse passing through the fade-in and fade-out effect_jquery Next article：Original image comparison curtain effect implemented by jQuery_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