지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > JavaScript+CSS+DIV를 사용하여 테이블 색상을 변경하는 방법

JavaScript+CSS+DIV를 사용하여 테이블 색상을 변경하는 방법

一个新手
풀어 주다： 2017-09-22 10:36:23
원래의
1731명이 탐색했습니다.

테이블을 설정하세요. 마우스가 특정 행으로 이동하면 색상이 변경됩니다. 마우스가 떠나면 색상이 원래 색상으로 변경됩니다. 각 줄에는 두 개의 마우스 이벤트가 필요합니다:

1. 마우스 재정의: onMouseOver

2. 마우스 아웃: onMouseOut

동시에 다음 두 이벤트는 이벤트 함수를 호출해야 합니다. 1. 구현 행 색상 설정: 

resetColor(row)
로그인 후 복사

2. 행 색상 변경 구현: 

changeColor(row)
로그인 후 복사

구현 코드: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title>变色表格示例</title>
	<script type="text/javascript">
	function changeColor(row){
	 document.getElementById(row).style.backgroundColor=&#39;#9999FF&#39;;
	}
	function resetColor(row){
	document.getElementById(row).style.backgroundColor=&#39;&#39;;
	}
	</script>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
  <table width="200" border="1" cellspacing="1" cellpadding="1" align="center">
  <tr><th>学校</th><th>专业</th><th>人数</th></tr>
  <tr align="center" id="row1" onMouseOver="changeColor(&#39;row1&#39;)"
   onMouseOut="resetColor(&#39;row1&#39;)">
   <th>北大</th><th>法律</th><th>2000</th>
   </tr>
   <tr align="center" id="row2" onMouseOver="changeColor(&#39;row2&#39;)"
    onMouseOut="resetColor(&#39;row2&#39;)">
    <th>清华</th><th>计算机</th><th>5000</th>
   </tr>
   <tr align="center" id="row3" onMouseOver="changeColor(&#39;row3&#39;)"
    onMouseOut="resetColor(&#39;row3&#39;)">
    <th>人大</th><th>经济</th><th>6000</th>
    </tr>
  </table>
  </body>
</html>
로그인 후 복사

위 내용은 JavaScript+CSS+DIV를 사용하여 테이블 색상을 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
css
원천：php.cn
이전 기사：이것의 js 함수의 이해에 대해서 다음 기사：쿠키/세션 메커니즘 소개
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
웹 애플리케이션 및 PWA의 경험을 개선하기 위해 투명한 브라우저를 실행합니다. [정적 HTML, CSS 및 JavaScript 지원] [사용자가 웹 애플리케이션/PWA에서 데스크탑 배경화면을 볼 수 있도록 허용] 저는 현재 소켓을 사용하여 웹 애플리케이션(채팅)을 개발하고 있는 주니어 프런트 엔드 개발자이자 디자이너입니다. 나와 친구들이 사용하는 언어는 Scala, HTM...
에서 2024-04-05 13:50:12
0
1
1367
PDF 파일에서 HTML5 및 Javascript를 실행할 수 있습니까? PDF에 포함되므로 어떤 컴퓨터에서도 차단되지 않는 프로그램을 만들어 보자는 어리석은 생각이 있습니다(Javascript가 PDF에서 실행될 수 있다고 들었습니다...
에서 2024-04-05 12:57:00
0
1
456
루트 노드의 목록 항목 기호(<ul> 및 <ol>)는 CSS에서 표시 및 제거할 수 없으며, Overflow-x:hidden 문제는 제거할 수 없습니다. 현재 웹페이지 작업을 하고 있는데 목록 항목에 문제가 있습니다. 일반적으로 각 목록 항목 옆에 나타나는 점과 숫자는 표시되지 않습니다. 또한 CSS 속성에서 Ov...
에서 2024-04-04 16:38:22
0
1
3617
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿