

实现:隔行换色
分析:
隔行 需要统计行数 数组处理并把每相邻两行区分出来选择其中一行
换色 通过css更改背景颜色 更改符合条件行的class属性 css类选择器为更改的值
css部分
<style type="text/css">
.blue{
background: blue;
}
</style>
html部分
<table align="center" border="1px" width="600px" height="200px">
<tr class="default">
<td width="20px">
<input type="checkbox" id="checkbox1" class="checkbox"/>
</td>
<td>1</td>
<td>手机</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr class="default">
<td>
<input type="checkbox" id="checkbox2" class="checkbox"/>
</td>
<td>2</td>
<td>相机</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr class="default">
<td>
<input type="checkbox" id="checkbox3" class="checkbox"/>
</td>
<td>3</td>
<td>箱包</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr class="default">
<td>
<input type="checkbox" id="checkbox4" class="checkbox"/>
</td>
<td>4</td>
<td>家具</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td colspan="4">
<button id="btn" onclick="change()">隔行换色</button>
</td>
</tr>
</table>
JavaScript部分
<script>
function change(){
var arr = document.getElementsByTagName("tr");
for(var i=0;i<arr.length;i++){
if(i%2==0){
arr[i].className="blue";
}
}
}
</script>
358

被折叠的 条评论
为什么被折叠?



