집 >웹 프론트엔드 >JS 튜토리얼 >Jquery는 색상 변경 위로 마우스를 이동할 때 교대로 테이블 색상이 변경되도록 구현합니다.

Jquery는 색상 변경 위로 마우스를 이동할 때 교대로 테이블 색상이 변경되도록 구현합니다.

WBOY원래의: 2016-05-16 17:24:051498검색

Jquery는 행을 클릭하여 선택하고 색상 변경 효과 위로 마우스를 이동하면 다음과 같이 대체 테이블 색상을 구현합니다.
소스 코드(데모) 패키지 다운로드 Jquery는 색상 변경 위로 마우스를 이동할 때 교대로 테이블 색상이 변경되도록 구현합니다.
html 코드는 다음과 같습니다. :

코드 복사 코드는 다음과 같습니다.

<머리>

<본문>
align="center" cellpadding="0" cellpacing="1 " bgcolor="#c0de98">

table-row-1.0.js

复代码代码如下:

 
$(document).ready(function(){ 
///////Datagrid에서 선택한 행의 색상이 변경되고 마우스가 해당 행 위로 이동합니다. //////////// /// / 
var dtSelector = ".list"; 
var tbList = $(dtSelector) 

tbList.each(function() { 
var self = this; 
$( "tr:even:not(:first)", $(self)).addClass("normalEvenTD") // 헤더 줄의 다음 줄부터 시작하는 홀수 줄, 줄 수: (1 , 3, 5... ) 
$("tr:odd", $(self)).addClass("normalOddTD") // 헤더 줄의 다음 줄부터 시작하는 짝수 줄, 개수 줄: (2, 4, 6... ) 

//마우스가 지나간 줄의 색상이 변경됩니다
$("tr:not(:first)", $(self)).hover ( 
함수 () { $(this).addClass ('hoverTD');$(this).removeClass('table-td-content'); }, 
함수 () { $(this). RemoveClass('hoverTD');$(this).addClass( 'table-td-content') } 
) 

//선택 행 색상 변경
$("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 '); 
}); 
});

성명：

이전 기사：JavaScript 맞춤 이벤트 소개_javascript 기술다음 기사：JavaScript 맞춤 이벤트 소개_javascript 기술

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

Jquery는 색상 변경 위로 마우스를 이동할 때 교대로 테이블 색상이 변경되도록 구현합니다.

관련 기사