집 > 기사 > 웹 프론트엔드 > 목록 페이지에 인터레이스 색상 변경 효과를 구현하기 위해 JS를 사용한 샘플 코드 공유

목록 페이지에 인터레이스 색상 변경 효과를 구현하기 위해 JS를 사용한 샘플 코드 공유

黄舟원래의: 2017-03-25 14:27:021525검색

이 글은 주로 JS 목록 페이지의 인터레이스 색상 변경 효과 구현에 대해 자세히 소개합니다. 관심 있는 친구들은 참고할 수 있습니다

먼저 살펴보세요 인터레이스 색상 효과:

코드:

<head runat="server">
 <title></title>
 <script type="text/javascript">
  window.onload = function () {
   var otab = document.getElementById(&#39;tab1&#39;);
   var thiscolor = &#39;&#39;;
   for (var i = 0; i < otab.tBodies[0].rows.length; i++) {
    otab.tBodies[0].rows[i].onmouseover = function () {
     thiscolor = this.style.background;
     this.style.background = &#39;#00FFFF&#39;;
    };
    otab.tBodies[0].rows[i].onmouseout = function () {
     this.style.background = thiscolor;
    };
    if (i % 2) {
     otab.tBodies[0].rows[i].style.background = &#39;&#39;;
    }
    else {
     otab.tBodies[0].rows[i].style.background = &#39;#FFFF00&#39;;
    }
   }
  };
 </script>
</head>
<body>
 <table id="tab1" border="1" style="text-align: center; width: 500px; margin: 200px auto">
  <thead>
   <tr style="background-color: #FF0000">
    <td>
     种族名称
    </td>
    <td>
     种族简称
    </td>
    <td>
     英雄
    </td>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>
     人类联盟
    </td>
    <td>
     HUM
    </td>
    <td>
     代表性英雄：AM
    </td>
   </tr>
   <tr>
    <td>
     兽人部落
    </td>
    <td>
     ORC
    </td>
    <td>
     代表性英雄：BM
    </td>
   </tr>
   <tr>
    <td>
     不死亡灵
    </td>
    <td>
     UD
    </td>
    <td>
     代表性英雄：DK
    </td>
   </tr>
   <tr>
    <td>
     暗夜精灵
    </td>
    <td>
     NE
    </td>
    <td>
     代表性英雄：DH
    </td>
   </tr>
  </tbody>
 </table>
</body>

위 내용은 목록 페이지에 인터레이스 색상 변경 효과를 구현하기 위해 JS를 사용한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JS에서 하위 창을 닫고 기본 창을 새로 고치는 showModalDialog 사용법을 자세히 소개합니다.다음 기사：JS에서 하위 창을 닫고 기본 창을 새로 고치는 showModalDialog 사용법을 자세히 소개합니다.