집 >웹 프론트엔드 >JS 튜토리얼 >jquery는 더 나은 테이블 선택 행을 달성합니다.

jquery는 더 나은 테이블 선택 행을 달성합니다.

WBOY원래의: 2016-05-16 16:54:321022검색

jquery 테이블 선택 행 색상(더 나은 효과)

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

<머리>

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

js 코드:

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

 
<script> <br>$(function(){ <br>////// /datagrid selected 행 색상이 변경되고 마우스가 행 위로 지나갑니다 ////////////// <br>var dtSelector = ".list" <br>var tbList = $(dtSelector) ; <br><br> tbList.each(function() { <br>var self = this; <br>$("tr:even:not(:first)", $(self)).addClass("normalEvenTD "); // 헤더 줄의 다음 줄부터 시작하는 표준 홀수 줄에서 줄 수: (1, 3, 5...) <br>$("tr:odd", $(self)). addClass("normalOddTD"); // 표준에서 헤드 라인의 다음 라인부터 시작하는 짝수 라인, 라인 수: (2, 4, 6...) <br><br>// 라인 마우스가 색상 변경 <br>$("tr:not(:first)", $(self)).hover( <br>function () { $(this).addClass('hoverTD');$( this).removeClass('table-td-content'); }, <br>function ( ) { $(this).removeClass('hoverTD');$(this).addClass('table-td-content') ; } <br>) <br><br>// 선택 행 색상 변경<br> $("tr", $(self)).click(function (){ <br>var trThis; <br>$(self).find(".trSelected").removeClass('trSelected'); if ($(trThis).get(0) == $("tr:first", $(self)) .get(0)){ <br>return; <br>} <br>$(trThis ).addClass('trSelected') <br>}); 🎜></script> 

효과 표시:

성명：

이전 기사：jquery의 각 메소드 사용 예 Sharing_jquery다음 기사：jquery의 각 메소드 사용 예 Sharing_jquery

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

jquery는 더 나은 테이블 선택 행을 달성합니다.

관련 기사