집 >웹 프론트엔드 >JS 튜토리얼 >Jquery는 테이블 스타일 settings_jquery를 구현합니다.

Jquery는 테이블 스타일 settings_jquery를 구현합니다.

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

이전 기사에서는 jquery를 사용하여 체크박스 전체 선택을 구현했습니다. 몇몇 친구들로부터 제안을 받았는데, 플러그인의 정의에 대해 잘 몰랐기 때문에 몇몇 친구들이 저에게 읽어보라고 제안했습니다. "Sharp Jquery" 솔직히 말해서 보고 있었어요. 아직 공부 중이기 때문에 프로젝트에서 자주 사용하는 jquery 효과를 일반적인 방법으로 작성하고 싶습니다. 이러한 방법을 모두의 도움으로 개선하고, 방법을 모르는 사람들에게도 방법을 배울 수 있도록 하고 싶습니다. 마지막으로 향후 사용을 용이하게 하기 위해 나만의 Jquery 메서드 라이브러리를 구성합니다. 이 예제는 모두 참조 없이 직접 작성한 것이므로 개선이 필요한 부분이 많습니다.

1: 이 메소드를 작성하는 이유

프로젝트에서 일부 테이블은 스타일을 아름답게 만들기 위해 테이블 머리글에 하나의 스타일이 있고, 홀수 행에 하나의 스타일이 있고, 짝수 행에 하나의 스타일이 있습니다. 마우스가 그 위로 지나갈 때 색상이 변하고 마우스가 떠나면 색상으로 돌아갑니다.

2: 구현 과정

js 파일 xs_table_css.js

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

$(문서).ready(함수 () {

var xs_table_css = "xs_table"; //테이블 CSS 가져오기

var xs_table_th_css = "xs_table_th"; //테이블의 번째 스타일

var xs_table_even_css = "xs_table_even"; //테이블 CSS의 짝수 행

var xs_table_odd_css = "xs_table_odd"; //테이블 CSS의 홀수 행

var xs_table_select_css = "xs_table_select"; //테이블 선택 행 스타일

var xs_table = "테이블." xs_table_css;

$(xs_table).each(함수 () {

            $(this).children().children().has("th").addClass(xs_table_th_css) //헤더

         var tr_even = $(this).children().children(":even").has("td") //짝수 행의 데이터

         var tr_odd = $(this).children().children(":odd").has("td") //홀수 번호의 데이터 행

        tr_even.addClass(xs_table_even_css);

          tr_odd.addClass(xs_table_odd_css);

         tr_even.mouseover(함수 () {

                 $(this).removeClass(xs_table_even_css);

                $(this).addClass(xs_table_select_css);

        });

          tr_even.mouseout(함수 () {

                $(this).removeClass(xs_table_select_css);

                $(this).addClass(xs_table_even_css);

        });

          tr_odd.mouseover(함수 () {

                $(this).removeClass(xs_table_odd_css);

                 $(this).addClass(xs_table_select_css);

        });

         tr_odd.mouseout(함수 () {

                $(this).removeClass(xs_table_select_css);

                 $(this).addClass(xs_table_odd_css);

        });

});

});

스타일 파일 xs_table.css

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

.xs_테이블
{
}
.xs_table_th
{
높이: 50px;
배경색: #C0C0C0;
}
.xs_table_even
{
높이: 50px;
배경색: #F0F0F0;
}

.xs_table_odd
{
높이: 50px;
배경색: #FFFFFF;
}
.xs_table_select
{
높이: 50px;
배경색: #D9D9D9;
}

페이지 파일 xs_table_css.htm

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

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">





<본체>
헤드원헤드2번째>

第一行	111111111
第이행	222222222
第삼행	333333333
제4행	444444444

헤드원헤드2번째>

성명：

이전 기사：js toLowerCase 메소드 사용법 예시_기본지식다음 기사：js toLowerCase 메소드 사용법 예시_기본지식

Jquery는 테이블 스타일 settings_jquery를 구현합니다.

관련 기사