효율적인 테이블 행 배경색 변경 및 강조 표시된 JS code_javascript 기술 선택

이 JS를 헤드에 배치하세요

코드를 복사하세요 코드는 다음과 같습니다:

// 현재 선택 클릭 행잉 시 현재 행의 색상을 설정하고, 현재 행 이외의 행의 색상 및 마우스 이벤트를 동시에 복원
function selectRow(target)
{
var sTable = document.getElementById("ServiceListTable")
for(var i=1;i{
if (sTable.rows [i] != target) // 현재 행이 선택되어 있는지 확인
{
sTable.rows[i].bgColor = "#ffffff"; //배경색 설정
sTable.rows[ i].onmouseover = 이력서RowOver; //onmouseover 이벤트 증가
sTable.rows[i].onmouseout = 이력서RowOut;//onmouseout 이벤트 추가
}
else
{
sTable.rows[ i].bgColor = "#d3d3d3";
sTable.rows[i].onmouseover = ""; //마우스 이벤트 제거
sTable.rows[i].onmouseout = "";
}
}
}
//이동 시 tr의 배경색
function rowOver(target)
{
target.bgColor='#e4e4e4'
}
//이동 시 tr의 배경 Color
function rowOut(target)
{
target.bgColor='#ffffff'
}
//Restore 호출 함수를 지원하는 tr의 onmouseover 이벤트
function 이력서RowOver()
{
rowOver(this)
}
//호출 함수를 지원하는 tr의 onmouseout 이벤트 복원
함수 이력서RowOut()
{
rowOut(this); <
}

마지막 두 함수인 이력서RowOver와 이력서RowOut이 이렇게 작성된 이유는 앞서 페이지 요소에 이벤트를 추가하는 방법에 대해 제가 작성한 내용을 참고하세요. js
해당 테이블 HTML

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

< ;table width="100%" border="0" cellpacing="0" cellpadding ="0" id="ServiceListTable">

서비스 문제
N번째>
번째>완료번째>
번째>정보


관련 콘텐츠





관련 콘텐츠



>

관련 콘텐츠 ;






관련 콘텐츠



>
테이블>