자바스크립트 테이블에서 대체 행의 색상을 변경하고 마우스 움직임을 안팎으로 추가하고 효과를 클릭하는 방법

자바스크립트 테이블에서 대체 행의 색상을 변경하고 마우스 움직임을 안팎으로 추가하고 효과를 클릭하는 방법_javascript 기술

WBOY

풀어 주다： 2016-05-16 16:04:47

원래의

1903명이 탐색했습니다.

이 기사의 예에서는 자바스크립트 테이블에서 대체 행의 색상을 변경하고 마우스 움직임 및 클릭 효과를 추가하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

테이블은 행마다 색상이 바뀌는데, 이는 사용자 경험을 향상시키는 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&#63;"#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&#63;"#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&#63;"#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 프로그래밍 설계에 도움이 되기를 바랍니다.