자바스크립트 수정 테이블 배경색 예시 코드 공유

저자：Eve Cole 업데이트 시간：2025-01-18 15:00:03

다음과 같이 코드 코드를 복사합니다.

<html>

<스크립트>

//현재 선택된 행을 클릭할 때 현재 행의 색상을 설정하고, 현재 행이 아닌 행의 색상과 마우스 이벤트를 복원합니다.

함수 selectRow(대상)

{

var sTable = document.getElementById("ServiceListTable")

for(var i=1;i<sTable.rows.length;i++) //첫 번째 행을 제외한 모든 행을 탐색합니다.

{

if (sTable.rows[i] != target) //현재 행이 선택되어 있는지 확인

{

sTable.rows[i].bgColor = "#ffffff" //배경색 설정

sTable.rows[i].onmouseover = 이력서RowOver; //onmouseover 이벤트 추가

sTable.rows[i].onmouseout = 이력서RowOut;//onmouseout 이벤트 추가

}

또 다른

{

sTable.rows[i].bgColor = "#d3d3d3";

sTable.rows[i].onmouseover = ""; //마우스 이벤트 제거

sTable.rows[i].onmouseout = ""; //마우스 이벤트 제거

}

//이동 시 tr의 배경색

함수 rowOver(대상)

{

target.bgColor='#e4e4e4';

}

//이사시 tr의 배경색

함수 rowOut(대상)

{

target.bgColor='#ffffff';

}

//함수 호출을 지원하는 tr의 onmouseover 이벤트를 복원합니다.

함수 이력서RowOver()

{

rowOver(this);

}

//함수 호출을 지원하는 tr의 onmouseout 이벤트를 복원합니다.

함수 이력서RowOut()

{

rowOut(this);

}

</script>

<본문>

<div onmouseover="javascript:this.style.BackgroundColor='red';" onmouseout="javascript:this.style.BackgroundColor='blue'">마지막 두 함수인 이력서RowOver 및 이력서RowOut에 대해서는 앞서 작성한 내용을 참조하세요. js HTMLview plaincopy를 통해 페이지 요소에 이벤트에 해당하는 테이블을 클립보드 인쇄에 추가하시겠습니까?

</div>

<tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</table>

</body>

</html>