Example of using the jquery hover event to implement the interlaced color changing function of a table_jquery

jQuery hover event

hover(over,out) is a method that simulates hover events (the mouse moves over and out of an object). This is a custom method that provides a "keep in it" state for frequently used tasks.
When the mouse moves over a matching element, the first specified function will be triggered. When the mouse moves out of this element, the specified second function will be triggered. Moreover, it will be accompanied by detection of whether the mouse is still in a specific element (for example, an image in a div). If so, it will continue to remain in the "hover" state without triggering the move-out event (fixed use of mouseout A common mistake in events).

Parameters:
over (Function): The function to be triggered when the mouse moves over the element
out (Function): The function to be triggered when the mouse moves out of the element

Example:
Mouseover table plus specific class

jQuery code:

Copy code The code is as follows:

$(".table_list tr").hover(
function () {
$(this ).addClass("hover");
},
function () {
$(this).removeClass("hover");
}

);

Please note a few points here:

1. .hover is a class, you can write whatever effect you want.

2. Don’t forget to import the jquery.js file, otherwise it won’t work and an error will be reported.

3. Compared with traditional CSS, such as this.bgColor='red', it is much simpler and does not need to be added line by line.

4. Of course, odd and even rows can have different effects. Readers can do their own research.

Today I found a simpler way, which is to use jquery's each method. This only requires one line of code to achieve the interlaced color changing effect. It just won't change as the mouse moves.

Copy code The code is as follows:

$(".tablist tr").each(function (i){this.style.backgroundColor=['#ccc','#fff'][i%2]});