클릭 할 때 HTML 표에서 행 강조 표시

HTML로 웹 페이지를 만들 때 JavaScript 함수를 사용하여 사용자 상호 작용시 페이지 요소의 모양을 변경할 수 있습니다. 테이블의 특정 행을 강조 표시하기 위해 일반 상태와 강조 표시된 상태의 행에 대한 CSS (Cascading Style Sheet) 선언을 설정할 수 있습니다. 행 리스너에 이벤트 리스너 속성을 추가하면 페이지에서 onclicks를 실행하는 JavaScript 함수를 호출하여 요소의 클래스 이름 속성을 동적으로 변경 한 다음 해당 모양을 변경할 수 있습니다.

1.

HTML 표를 만듭니다. 웹 페이지 파일에 다음 샘플 마크 업 코드를 추가하십시오.

이 테이블에는 각각 세 개의 열이있는 두 개의 행이 들어 있습니다. 각 셀에는 데모 용으로 번호가 있지만 원하는 페이지를 자신의 페이지에 포함 할 수 있습니다.

2.

페이지의 머리 부분에 CSS 섹션을 추가하십시오. 파일의 여는 head 태그와 닫는 head 태그 사이에 다음 CSS 코드 개요를 추가하십시오.

이 코드는 테이블 행을 기본적으로 흰색 배경으로 설정하고 사용자가 클릭하면 빨간색 배경으로 설정합니다. 이 설정을 변경하여 자신의 페이지 스타일을 반영 할 수 있습니다. 사용자가 처음 페이지를 볼 때 원본 HTML 코드의 표 행 클래스 속성에 표시된대로 일반 CSS 설정이 적용됩니다.

삼.

페이지 머리 부분에 JavaScript 섹션을 추가하십시오. 파일의 여는 head 태그와 닫는 head 태그 사이에 다음 코드를 추가하십시오.

스크립트 섹션과 함수 개요가 작성됩니다. 사용자가 테이블 행을 클릭하면 스크립트가이를 식별 할 수 있도록 클릭 한 행의 ID 속성 값을 전달할 때 브라우저가이 함수를 호출합니다.

4.

테이블 행 요소의 클래스 이름을 변경하십시오. 함수가 실행되면 사용자가 행 요소를 클릭했음을 의미합니다. JavaScript 함수 내에 다음 코드를 추가하여 페이지 내의 테이블 행 요소에 대한 참조를 가져옵니다. var row = document.getElementById (rowID);

다음 행을 추가하여 테이블 행 요소의 현재 클래스 이름의 문자열 복사본을 가져옵니다. var curr = row.className;

테이블 행 모양을 조정하는 조건문을 추가하십시오. if (curr.indexOf ( "normal")> = 0) row.className = "highlight"; else row.className = "normal";

테이블 행이 현재 정상적으로 설정된 경우 함수는 강조 표시로 변경합니다. 현재 강조 표시되어있는 경우 함수는이를 다시 정상으로 변경합니다. 이렇게하면 사용자가 행을 클릭 할 때마다 강조 표시 상태가 번갈아 전환 효과가 만들어집니다.

5.

파일을 저장하고 웹 브라우저 프로그램에서 페이지를여십시오. 행을 반복적으로 클릭하여 페이지를 테스트하십시오. 행을 클릭 할 때마다 배경색이 변경됩니다. 페이지가 클릭 할 때 행을 강조 표시하지 않으면 코드를 확인한 다음 다시 엽니 다. 사이트의 강조 표시 및 프레젠테이션 수준을 제공하도록 코드를 향상 시키십시오.

팁

• CSS 코드를 추가하면 텍스트 색상과 각 상태에있는 표 행의 기타 속성을 지정할 수 있습니다.

경고

• JavaScript와 CSS는 여러 브라우저에서 서로 다른 결과를 나타 내기 때문에 테스트가 필수적입니다.