지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 마우스 움직임에 따라 색상이 변하는 테이블 행의 예_jquery

마우스 움직임에 따라 색상이 변하는 테이블 행의 예_jquery

WBOY
풀어 주다： 2016-05-16 16:49:31
원래의
1227명이 탐색했습니다.

1、设计表格

复代码 代码如下:





工号일>
이름



































































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

.html_body .body_div{
너비: 1340;
높이: 595;
}
.body_div{
글꼴 크기: 12px;
배경색: #CCCCCC;
}
.tr_odd{
배경색: 주황색;
}
.tr_even{
배경색: 아쿠아;
}
.mouse_color{
배경색: 녹색;
}
#tab{
테두리: 1px #FF0000 솔리드;
텍스트 정렬: 가운데;
너비: 100%;
높이: 100%;
}

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

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

/**
* 마우스 색상이
로 이동되었습니다.*/
$("#tab tr").mouseover(function(){
$(this).find("td").addClass(" mouse_color");
});

/**
* 마우스 이동 색상
*/
$("#tab tr").mouseout(function(){
$(this).find("td").removeClass(" mouse_color");
});

4. 디자인 결과

(1) 초기화
마우스 움직임에 따라 색상이 변하는 테이블 행의 예_jquery
(2) 홀수행 클릭
마우스 움직임에 따라 색상이 변하는 테이블 행의 예_jquery
(3) 짝수 클릭 행
마우스 움직임에 따라 색상이 변하는 테이블 행의 예_jquery
5. 부록
코드 복사 코드는 다음과 같습니다.

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



<머리>

테이블随鼠标变color














年龄 성별
2014010101 张峰 56 男
2014010102 이진 42 여자
2014010103 王珂 36 男
2014010104 张钰 31 여자
2014010105 朱顾 44 男
2014010106 胡雨 35 여자
2014010107 刘希 30 男
2014010108 孙宇 45 여자
2014010109 谷雨 33 男
2014010110 科宇 45 여자


工号일>
이름




































































관련 라벨：
변색
원천：php.cn
이전 기사：JavaScript_javascript 팁에서 타이머 사용 예 다음 기사：Android의 jQuery: AQuery_jquery 소개
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1361
URL 매개변수에서 얻은 PHP 배열이 예상대로 작동하지 않습니다. 카테고리 ID가 포함된 URL 매개변수가 있고 이를 다음과 같은 배열로 처리하려고 합니다. http://example.com?cat[]=3,9,13 PHP에서는 ...
에서 2024-04-06 22:09:02
0
1
1428
Width 속성을 추가하여 콘텐츠를 왼쪽으로 이동합니다. 나는 본문에 여백을 제공했습니다. main {left margin: 200px; right margin: 200px; text alignment: center} ...
에서 2024-04-06 22:01:35
0
3
816
Apache에서 CustomLog 지시문을 어디에 배치해야 합니까? 저는 php:7.2-apachedocker를 사용하고 있습니다. 상태 확인 URL 로그인 액세스 로그를 비활성화해야 합니다. 이 링크를 기반으로 Customlog...
에서 2024-04-06 22:03:59
0
1
990
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
年龄 성별
2014010101 张峰 56 男
2014010102 이진 42 여자
2014010103 王珂 36 男
2014010104 张钰 31 여자
2014010105 朱顾 44 男
2014010106 胡雨 35 여자
2014010107 刘希 30 男
2014010108 孙宇 45 여자
2014010109 谷雨 33 男
2014010110 科宇 45 여자