웹 페이지의 테이블 행에 대한 JavaScript 코드 강조 표시

이 기사는 개발 연구 노트 중 하나입니다.
[텍스트]
웹 개발을 하다 보면 마우스가 가리키는 테이블 행을 강조 표시해야 하는 상황이 자주 발생합니다. 먼저 전반적인 상황을 말씀드리겠습니다.
·쉬운 시도
CSS2를 사용하면 HTML 요소에 hover 의사 클래스를 사용할 수 있어 테이블 스타일 제어가 매우 쉬워집니다.
작은 예부터 시작합니다.
XHTML(표 부분만 나열되어 있습니다. 페이지를 직접 완성하세요. 이 예는 Transational의 DTD에 전달됩니다.):

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

;

>

tr class="oddRow">

">

그런 다음 CSS를 사용하여 테이블 스타일을 정의합니다.

코드 복사

코드는 다음과 같습니다.

.datatable{
margin:15px auto;
width:500px; /*이 두 줄은 필요에 따라 수정할 수 있습니다.* /

} .datatable,.datatable tr,.datatable td,.datatable th,.datatable .tableheader td{ border:1px #0073ac solid; >padding:3px; } .datatable .tableheader td,.datatable th{ font-weight:bold 배경:#fff url(images/thead.png) 반복-x;

padding:8px 5px;

} 
.datatable tr:hover{ 
 background-color:#cfe9f7; 
} 

설명하지 않겠습니다. CSS 부분에 대해 많이. 마지막에 굵은 글씨로 표시된 부분은 tr 요소에 의사 호버 스타일을 적용한 것임을 참고하시기 바랍니다. 이는 CSS2(IE7, FF, Opera, Safari 등)를 지원하는 브라우저에서 완벽하게 작동합니다. 그러나 CSS1은 앵커 요소 a에 대해서만 의사 클래스 지원을 제공합니다. 불행하게도 IE6은 여전히 ​​CSS1 의사 클래스만 지원합니다. 따라서 우리는 IE6에 대한 지원을 제공하기 위해 수정해야 합니다. 
먼저 스타일 추가: 

코드 복사 

 코드는 다음과 같습니다. 

 .datatable .trHover ,.datatable tr:hover{

background-color:#cfe9f7;
}

IE6에서 표시를 수정하기 위해 여기에 trHover 클래스가 추가되었습니다. 다음 단계는 자바스크립트를 작성하는 것입니다. 초기 아이디어는 매우 간단합니다. 마우스를 가리킬 때 현재 줄이 강조 표시되기를 원하지 않습니까? 따라서 각 줄에 javascipt를 적용하면 됩니다. 먼저 자바스크립트 함수를 작성합니다. 통일을 위해 강조표시와 강조표시 취소를 하나의 함수로 결합하여 함수 호출을 단순화할 수 있도록 tr의 mouseover 및 mouseout 이벤트에 함수를 바인딩하면 됩니다. 코드 복사

 코드는 다음과 같습니다.

 
function 하이라이트Tr(o){ 
 var regStr= /bs*trHoverb/g; /*정규식 필터 trHover 클래스*/ 

if(o.className.indexOf('trHover')==-1)
o.className =" trHover";
else

o.className=o.className.replace(regStr,""); } 여기서 약간의 트릭이 사용됩니다: 정규 표현식 교체. tr 요소에 다른 스타일(클래스)이 있을 수 있으므로(예: 이 예에서는 evenRow 및oddRow) 강조 표시를 해제할 때 객체의 className을 비워 둘 수는 없습니다. 그런 다음 모두가 상상한 대로 이벤트를 tr에 바인딩합니다.

코드 복사

 코드는 다음과 같습니다.

;ValueValue1

모든 tr에 대한 이벤트 바인딩을 작성하세요. 그러나 여기에도 문제가 있습니다. 1. 페이지의 코드 양이 늘어납니다. 2. 테이블이 백그라운드 서버 프로그램에 의해 출력되는 경우 JavaScript 함수를 tr 요소에 바인딩하는 것이 허용되지 않는 경우가 있습니다. 무엇을 해야 할까요? 직접적으로 생각해 보면 js를 사용하여 페이지의 특정 범위에서 이 스타일의 테이블을 검색한 다음 tr 이벤트를 바인딩할 수 있습니다. 하지만 오늘은 생각을 바꿔서 js 이벤트를 테이블 요소에 직접 바인딩하여 특정 행을 강조해 보겠습니다.
이 아이디어는 타당한 근거가 있습니다. 이것은 브라우저의 이벤트 모델에 대해 이야기해야 합니다. 역사적인 이유로 인해 다양한 브라우저는 JavaScript 이벤트 응답을 구현하는 방법에 차이가 있지만 기본 아이디어는 여전히 동일합니다. Node.js 이벤트는 W3C DOM에서 캡처 버블 모델로 설명됩니다. 간단히 말하면 만두를 만드는 것과 비슷합니다. 만두가 냄비 바닥으로 점차 가라앉다가 열 전달을 받아 천천히 위로 떠오르는 것입니다. 모델 자체로 돌아가서 JavaScript 이벤트에는 두 가지 주요 범주가 있습니다. 첫째, 가장 바깥쪽 요소에서 이벤트를 캡처하고 이벤트를 트리거한 요소로 점차적으로 내부로 전달합니다. 이를 이벤트 캡처라고 하며, 그런 다음 점차적으로 바깥쪽으로 확장합니다. 외부 요소 - 이를 이벤트 버블링이라고 합니다. IE 구현은 캡처 유형 이벤트를 지원하지 않으며 버블링 이벤트 구현은 W3C DOM 표준과 약간 다르지만 전체적인 아이디어는 동일합니다.
오랜 시간 동안 이야기한 끝에 이벤트 버블링 처리 메커니즘을 사용하여 테이블 행을 강조 표시하는 목적을 달성하고자 합니다.
다시 한번 버블링 이벤트는 돌에 의해 발생하는 파문처럼 JavaScript 이벤트를 트리거하는 가장 안쪽 요소에서 외부 레이어로 퍼집니다. 마우스가 특정 줄 위로 미끄러지면 먼저 텍스트나 td의 다른 요소와 같은 가장 안쪽 요소가 mouseover를 트리거한 다음 td-->tr-->tbody--> 테이블로 전달되어 응답합니다. mouseover 이벤트가 차례로 발생합니다. 마우스가 밖으로 움직일 때에도 이러한 순차적인 버블링 프로세스가 있습니다. 이것이 우리가 사고 대응자에게 접근하는 방법입니다.
먼저 XHMTL의 이벤트 바인딩 코드를 수정해야 합니다. tr 요소에서 mouseover 및 mouseout 이벤트 처리를 제거한 다음 테이블에 이벤트 처리를 추가합니다. 최종 테이블은 다음과 같습니다.

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

< table class=" datatable" cellpacing="0" onmouseover="highlightTr();" onmouseout="highlightTr();"> 

;td> ;ItemItem2

td>ValueValue6

항목 값
ItemItem1	ValueValue1
ItemItem2	ValueValue2	ItemItem3	ValueValue3
ItemItem4	ValueValue4
항목5	값값5	항목 항목6	값값6
Item1
ItemItem1	ValueValue1
ValueValue2
;값값3	값값4
ValueValue5
ItemItem6

원래 작성한 테이블과 유사합니다. 이를 통해 테이블 요소에 대해 더 많은 js 이벤트 바인딩만 갖습니다. 다음 단계는 하이라이트Tr 기능에 대한 대수술을 수행하는 것입니다! 여기에서는 최종 코드를 먼저 게시한 후 함께 분석해 보겠습니다.

코드 복사

코드는 다음과 같습니다.

저자별 최신 기사