


Example code sharing using JS to implement interlaced color change effect on list pages
This article mainly introduces in detail the JS implementation of the interlaced color change effect on the list page, which has a certain reference value. Interested friends can refer to it
Take a look first Interlaced color change effect:
Code:
<head runat="server"> <title></title> <script type="text/javascript"> window.onload = function () { var otab = document.getElementById('tab1'); var thiscolor = ''; 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 = '#00FFFF'; }; otab.tBodies[0].rows[i].onmouseout = function () { this.style.background = thiscolor; }; if (i % 2) { otab.tBodies[0].rows[i].style.background = ''; } else { otab.tBodies[0].rows[i].style.background = '#FFFF00'; } } }; </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>
The above is the detailed content of Example code sharing using JS to implement interlaced color change effect on list pages. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to use JS and Baidu Maps to implement map pan function

Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS

Recommended: Excellent JS open source face detection and recognition project

PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts

How to create a stock candlestick chart using PHP and JS

How to use JS and Baidu Maps to implement map polygon drawing function

How to use JS and Baidu Map to implement map click event processing function

How to use JS and Baidu Maps to implement map heat map function
