您的位置：首页 > Web前端 > JavaScript

javascript学习成长历程

2016-06-23 23:09 134 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/caoqifu/article/details/84807481

使用javascript制作列表隔行变色功能；

<!DOCTYPE html>

<html>

 

<head>

<meta charset="UTF-8">

<title>特定表格隔行变色</title>

 

</head>

 

<body>

<table id="tbs">

<tbody>

<tr>

<td>第一行</td>

<td>第一行</td>

</tr>

<tr>

<td>第二行</td>

<td>第二行</td>

</tr>

<tr>

<td>第三行</td>

<td>第三行</td>

</tr>

<tr>

<td>第四行</td>

<td>第四行</td>

</tr>

<tr>

<td>第五行</td>

<td>第五行</td>

</tr>

<tr>

<td>第六行</td>

<td>第六行</td>

</tr>

<tr>

<td>第七行</td>

<td>第七行</td>

</tr>

</tbody>

</table>

</body>

 

<script type="text/javascript">

var item = document.getElementById("tbs");//获取id为tbs的table 

var tbody = item.getElementsByTagName("tbody")[0];//获取表格下第一个tbody元素

var trs = tbody.getElementsByTagName("tr");//获取tbody下所有的tr元素

for (var i = 0; i < trs.length; i++) {//循环tr元素

if (i % 2 == 0) {//隔行变色，所以取模取余数，余数==0就换一行

trs[i].style.backgroundColor = "#888";//当前tr元素变色

}

}

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航