手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JS小功能(列表页面隔行变色)简单实现
JS小功能(列表页面隔行变色)简单实现
摘要:效果:代码:复制代码代码如下:window.onload=function(){varotab=document.getElementByI...

效果:

JS小功能(列表页面隔行变色)简单实现1

代码:

复制代码 代码如下:

<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">

<thead>

<tr>

<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小功能(列表页面隔行变色)简单实现】相关文章:

新页面打开实际尺寸的图片

javascript实现可拖动变色并关闭层窗口实例

JS通过Cookie判断页面是否为首次打开

详解Wondows下Node.js使用MongoDB的环境配置

JavaScript中eval函数的问题

JavaScript生成福利彩票双色球号码

javascript的函数第1/3页

用JavaScript实现页面重定向功能的教程

jquery判断至少有一个checkbox被选中的方法

JavaScript中的Math.sin()方法使用详解

精品推荐
分类导航