자바스크립트 테이블에서 대체 행의 색상을 변경하고 마우스 움직임을 안팎으로 추가하고 효과를 클릭하는 방법_javascript 기술
이 기사의 예에서는 자바스크립트 테이블에서 대체 행의 색상을 변경하고 마우스 움직임 및 클릭 효과를 추가하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.
테이블은 행마다 색상이 바뀌는데, 이는 사용자 경험을 향상시키는 js 효과이기도 합니다.
효과 구현:
테이블의 홀수행과 짝수행의 색상이 다릅니다. 이렇게 하면 사용자가 데이터를 연속적으로 볼 수 없습니다.
마우스가 행으로 이동하면 색상이 변경되고 마우스가 행 밖으로 이동하면 색상이 다시 변경됩니다. 이를 통해 사용자는 자신이 보고 있는 라인이 무엇인지 명확하게 알 수 있습니다.
색상을 변경하려면 표를 클릭하세요. 사용자가 보관하고 싶은 항목을 선택하는 것이 편리합니다.
설명:
i%2 각 숫자 모듈로 2에는 0과 1의 두 가지 값만 있으므로 인터레이스 색상 변경 효과를 얻을 수 있습니다
tables_li[i].onoff = 1; 클릭 색상을 변경하려면 마우스가 들어오고 나갈 때 색상을 덮어쓰지 않습니다.
업로드 코드:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>无标题文档</title>
<style>
table{
border-collapse:collapse
}
table td{
height:26px;
font-size:12px;
color:#333;
border:1px solid #09c;
text-align:center;
padding:0 10px;
}
</style>
</head>
<body>
<script>
window.onload = function(){
var tables = document.getElementById("tables");
var tables_li = tables.getElementsByTagName("tr");
var i=0;
var len = tables_li.length;
for(i=0; i<len; i++){
tables_li[i].onoff = 1;
tables_li[i].index = i;
tables_li[i].style.backgroundColor = i%2?"#ace":"";
tables_li[i].onmouseover = function(){
if(this.onoff == 1){
this.style.backgroundColor = "#06c";
}
}
tables_li[i].onmouseout = function(){
if(this.onoff == 1){
this.style.backgroundColor = this.index%2?"#ace":"";
}
}
tables_li[i].onclick = function(){
if(this.onoff == 1){
this.onoff = 0;
this.style.backgroundColor = "#069";
}else{
this.onoff = 1;
this.style.backgroundColor = this.index%2?"#ace":"";
}
}
}
}
</script>
<table width="500" border="0" align="center"
cellpadding="0" cellspacing="0" id="tables">
<tr>
<td>1</td>
<td>内容内容</td>
</tr>
<tr>
<td>2</td>
<td>内容内容</td>
</tr>
<tr>
<td>3</td>
<td>内容内容</td>
</tr>
<tr>
<td>4</td>
<td>内容内容</td>
</tr>
<tr>
<td>5</td>
<td>内容内容</td>
</tr>
<tr>
<td>6</td>
<td>内容内容</td>
</tr>
<tr>
<td>7</td>
<td>内容内容</td>
</tr>
<tr>
<td>8</td>
<td>内容内容</td>
</tr>
<tr>
<td>9</td>
<td>内容内容</td>
</tr>
<tr>
<td>10</td>
<td>内容内容</td>
</tr>
</table>
</body>
</html>이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
Win11에서 작업 표시줄 축소판 미리 보기를 비활성화하는 방법은 마우스를 움직여 작업 표시줄 아이콘 표시 축소판 기술입니다.
Feb 29, 2024 pm 03:20 PM
이번 글에서는 Win11 시스템에서 작업 표시줄 아이콘을 마우스로 움직일 때 표시되는 썸네일 기능을 끄는 방법을 소개하겠습니다. 이 기능은 기본적으로 켜져 있으며 사용자가 작업 표시줄의 응용 프로그램 아이콘 위에 마우스 포인터를 올리면 응용 프로그램의 현재 창 축소판이 표시됩니다. 그러나 일부 사용자는 이 기능이 덜 유용하거나 경험에 지장을 준다고 생각하여 이 기능을 끄고 싶어할 수도 있습니다. 작업 표시줄 축소판은 재미있을 수도 있지만 주의를 산만하게 하거나 짜증나게 할 수도 있습니다. 이 영역 위로 마우스를 가져가는 빈도를 고려하면 실수로 중요한 창을 몇 번 닫았을 수도 있습니다. 또 다른 단점은 더 많은 시스템 리소스를 사용한다는 것입니다. 따라서 리소스 효율성을 높일 수 있는 방법을 찾고 있다면 비활성화하는 방법을 알려드리겠습니다. 하지만
PPT 표에 삽입된 그림의 형식을 조정하는 단계
Mar 26, 2024 pm 04:16 PM
1. 예시처럼 새 PPT 파일을 만들고 이름을 [PPT Tips]로 지정합니다. 2. [PPT 팁]을 더블클릭하여 PPT 파일을 엽니다. 3. 예를 들어 행 2개와 열 2개로 구성된 표를 삽입합니다. 4. 테이블 테두리를 더블클릭하면 상단 툴바에 [디자인] 옵션이 나타납니다. 5. [음영] 옵션을 클릭한 후 [그림]을 클릭하세요. 6. [그림]을 클릭하면 그림을 배경으로 채우기 옵션 대화 상자가 나타납니다. 7. 디렉토리에서 삽입하려는 트레이를 찾은 후 확인을 클릭하여 그림을 삽입하세요. 8. 테이블 상자를 마우스 오른쪽 버튼으로 클릭하여 설정 대화 상자를 불러옵니다. 9. [셀 서식]을 클릭하고 [이미지를 음영으로 배열]을 선택하세요. 10. [중앙], [미러] 및 기타 필요한 기능을 설정한 후 확인을 클릭하세요. 참고: 기본값은 테이블에 그림을 채우는 것입니다.
Razer | Pokémon Gengar 무선 마우스 및 마우스 패드가 현재 1,549위안의 가격으로 출시되었습니다.
Jul 19, 2024 am 04:17 AM
7월 12일 이 사이트의 뉴스에 따르면 Razer는 오늘 Razer|Pokémon Gengar 무선 마우스 및 마우스 패드 출시를 발표했습니다. 단일 제품 가격은 각각 1,299위안, 299위안이며, 두 제품을 포함한 패키지 가격은 1,549위안이다. Razer가 Gengar 공동 브랜드 주변 장치 제품을 출시한 것은 이번이 처음이 아닙니다. 2023년 Razer는 Gengar 스타일 Yamata Orochi V2 게임 마우스를 출시했습니다. 이번에 출시된 두 가지 신제품은 모두 고스트, 고스트, 젠가 계열의 외형과 유사한 진한 보라색 배경을 사용하며, 중간에 젠가라는 캐릭터를 중심으로 이 세 가지 포켓몬과 몬스터볼의 윤곽이 인쇄되어 있습니다. 고전적인 유령형 포켓몬의 크고 화려한 이미지. 이 사이트에서는 Razer|Pokémon Gengar 무선 마우스가 이전에 출시된 Viper V3 Professional Edition을 기반으로 한다는 사실을 발견했습니다. 전체 무게는 55g이며 Razer의 2세대 FOC가 탑재되어 있습니다.
조건에 따라 자동으로 색상이 변경되도록 WPS 값을 설정하는 방법_조건에 따라 자동으로 색상이 변경되도록 WPS 테이블 값을 설정하는 단계
Mar 27, 2024 pm 07:30 PM
1. 워크시트를 열고 [시작]-[조건부 서식] 버튼을 찾습니다. 2. 열 선택을 클릭하고 조건부 서식을 추가할 열을 선택합니다. 3. [조건부 서식] 버튼을 클릭하면 옵션 메뉴가 나타납니다. 4. [조건부규칙 강조]-[사이]를 선택하세요. 5. 20, 24, 진한 녹색 텍스트와 어두운 채우기 색상 규칙을 입력합니다. 6. 확인 후, 선택한 열의 데이터는 설정에 따라 해당 숫자, 텍스트 및 셀 상자로 색상이 지정됩니다. 7. 충돌하지 않는 조건부 규칙은 반복적으로 추가할 수 있지만, 충돌하는 규칙의 경우 WPS는 이전에 설정된 조건부 규칙을 마지막에 추가된 규칙으로 대체합니다. 8. [사이] 규칙 20-24 및 [보다 작음] 20 뒤에 셀 열을 반복적으로 추가합니다. 9. 규칙을 변경해야 하는 경우 규칙을 삭제한 다음 규칙을 재설정하면 됩니다.
HP, Professor 1 3가지 모드 소프트 마우스 출시: 4000DPI, Blue Shadow RAW3220, 초기 가격 99위안
Apr 01, 2024 am 09:11 AM
3월 31일 이 웹사이트의 소식에 따르면 HP는 최근 JD.com에서 검은색과 흰색 밀크티 색상으로 제공되는 Professor1 3모드 블루투스 마우스를 출시했으며 초기 가격은 99위안, 보증금 10위안이 필요합니다. . 보도에 따르면 이 마우스는 무게가 106g, 인체공학적 디자인을 채택하고 크기가 127.02x79.59x51.15mm이며 7가지 옵션 4000DPI 레벨을 갖추고 있으며 Blue Shadow RAW3220 센서가 장착되어 있으며 650mAh 배터리를 사용할 수 있다고 합니다. 한 번 충전으로 2개월 동안 사용할 수 있습니다. 본 사이트에 첨부된 마우스 매개변수 정보는 다음과 같습니다.
판매 예측 테이블을 만드는 방법
Mar 20, 2024 pm 03:06 PM
능숙하게 양식을 작성할 수 있다는 것은 회계, 인사, 재무에 필요한 기술일 뿐만 아니라 많은 영업사원에게도 매우 중요합니다. 왜냐하면 매출과 관련된 데이터는 매우 크고 복잡하며, 문제를 설명하기 위해 단순히 문서에 기록할 수는 없기 때문입니다. 더 많은 영업사원들이 엑셀을 능숙하게 활용하여 테이블을 만들 수 있도록 편집자가 판매예측에 관한 테이블 만들기 이슈를 소개합니다. 1. [매출 예측 및 목표 설정], xlsm을 열어 각 테이블에 저장된 데이터를 분석합니다. 2. 새로운 [빈 워크시트]를 생성하고 [셀]을 선택한 후 [라벨 정보]를 입력하세요. 아래로 [드래그]하여 달을 [채우세요]. [기타] 데이터를 입력한 후 [
VGN 공동 브랜드 'Elden's Circle' 키보드 및 마우스 시리즈 제품이 이제 출시되었습니다: Lani / Faded One 맞춤형 테마, 99위안부터 시작
Aug 12, 2024 pm 10:45 PM
8월 12일 이 웹사이트의 소식에 따르면 VGN은 8월 6일 Lani/Faded One의 맞춤형 테마로 디자인된 키보드, 마우스 및 마우스 패드를 포함하는 공동 "Elden Ring" 키보드 및 마우스 시리즈를 출시했습니다. 가격은 99위안부터 JD.com에 게시되었습니다. 이 사이트에 첨부된 공동 브랜드 신제품 정보는 다음과 같습니다. VGN丨Elden Law Ring S99PRO 키보드 이 키보드는 순수 알루미늄 합금 쉘을 사용하고 5층 소음기 구조로 보완되었으며 GASKET 판 스프링 구조를 사용하고 단일 -키 슬롯형 PCB 및 원래 높이의 PBT 소재 키캡, 알루미늄 합금 맞춤형 백플레인, VHUB에 연결된 SMARTSPEEDX 저지연 기술을 지원하며 가격은 549위안부터 시작됩니다. VGN丨Elden French Ring F1PROMAX 무선 마우스 더 마우스
Razer 마우스 드라이버는 어떤 폴더에 있나요?
Mar 02, 2024 pm 01:28 PM
많은 사용자는 Razer 드라이버로 설치한 파일이 어디에 있는지 모릅니다. 이러한 드라이버 파일은 일반적으로 컴퓨터의 C 드라이브인 시스템 디스크에 설치됩니다. 특정 위치는 프로그램 파일 아래의 RAZE 폴더에 있습니다. Razer 마우스 드라이버는 어떤 폴더에 있습니까? A: 시스템 C 드라이브의 프로그램 파일 아래 RAZE 폴더에 있습니다. 일반적으로 드라이버는 C 드라이브에 설치되며, 위치에 따라 찾으면 됩니다. Razer 마우스 드라이버 설치 방법 소개 1. 공식 홈페이지에서 파일을 다운로드한 후, 다운로드한 EXE 파일을 더블클릭하여 실행하세요. 2. 소프트웨어가 로드될 때까지 기다립니다. 3. 여기에서 설치하려는 드라이버를 선택할 수 있습니다. 4. 선택 후 오른쪽 하단의 "설치"를 클릭하세요.
