Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Example of table rows changing color as the mouse moves_jquery

Example of table rows changing color as the mouse moves_jquery

WBOY
Release： 2016-05-16 16:49:31
Original
1227 people have browsed it

1、设计表格

复制代码 代码如下:






































































工号 姓名 年龄 性别
2014010101 张峰 56 男
2014010102 李玉 42 女
2014010103 王珂 36 男
2014010104 张钰 31 女
2014010105 朱顾 44 男
2014010106 胡雨 35 女
2014010107 刘希 30 男
2014010108 孙宇 45 女
2014010109 谷雨 33 男
2014010110 科宇 45 女




2、设计样式
复制代码 代码如下:

.html_body .body_div{
width: 1340;
height: 595;
}
.body_div{
font-size: 12px;
background-color: #CCCCCC;
}
.tr_odd{
background-color: orange;
}
.tr_even{
background-color: aqua;
}
.mouse_color{
background-color: green;
}
#tab{
border: 1px #FF0000 solid;
text-align: center;
width: 100%;
height: 100%;
}

3、设计JS
复制代码 代码如下:

//设置奇数行背景色
$("#tab tr:odd").find("td").addClass("tr_odd");
//设置偶数行背景色
$("#tab tr:even").find("td").addClass("tr_even");

/**
* Color of mouse moved to
*/
$("#tab tr").mouseover(function(){
$(this).find("td").addClass("mouse_color");
});

/**
* Color of mouse move
*/
$("#tab tr").mouseout(function(){
$(this).find("td").removeClass("mouse_color");
});

4. Design results

(1) Initialization
Example of table rows changing color as the mouse moves_jquery
(2) Click on the odd row
Example of table rows changing color as the mouse moves_jquery
(3) Click on the even row
Example of table rows changing color as the mouse moves_jquery
5. Appendix
Copy code The code is as follows:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>





table随鼠标变色

















































































工号 姓名 年龄 性别
2014010101 张峰 56 男
2014010102 李玉 42 女
2014010103 王珂 36 男
2014010104 张钰 31 女
2014010105 朱顾 44 男
2014010106 胡雨 35 女
2014010107 刘希 30 男
2014010108 孙宇 45 女
2014010109 谷雨 33 男
2014010110 科宇 45 女




Related labels：
Discoloration
source：php.cn
Previous article：Example of using timer in JavaScript_javascript tips Next article：jQuery in Android: Introduction to AQuery_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
Latest Articles by Author
Latest Issues
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1361
PHP arrays obtained from URL parameters do not behave as expected I have a URL parameter that contains the category ID and I want to treat it as an array li...
From 2024-04-06 22:09:02
0
1
1428
Move the content to the left by adding the Width property I have provided margins to the body. main {left margin: 200px; right margin: 200px; text a...
From 2024-04-06 22:01:35
0
3
816
Where should I place CustomLog directive in apache I'm using php:7.2-apachedocker. I need to disable health check url login access log. Based...
From 2024-04-06 22:03:59
0
1
990
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template