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

用两种方式实现简单的隔行变色 用js实现

2012-02-27 17:49 567 查看
用两种方式实现简单的隔行变色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script language="javascript" type="text/javascript">

function getTr(){

//第一种方法

//获取所有的行数

/* var trs=document.getElementsByTagName("tr");

for(var i=0;i<trs.length;i++){

var classnames=document.getElementById("a").className ;

//获取所有tr的classname的值

if( i % 2 == 0){

trs[i].style.background="1px solid yellow";

}else{

trs[i].style.background="1px solid red";

} */

//用火狐测试

//第二种方法

var classnames=document.getElementsByClassName("namea");

//alert(classnames);

for(var i=0;i<classnames.length;i++){

classnames[i].style.background=" yellow";

}

var classnameb=document.getElementsByClassName("nameb");

for(var i=0;i<classnameb.length;i++){

classnameb[i].style.background="red";

}

}

</script>

</head>

<body>

<table width="200" border="0">

<tr class="namea" id="a" >

<td>啊啊啊啊啊啊啊啊啊啊啊</td>

</tr>

<tr class="nameb" id="a" >

<td>白拜拜拜拜拜拜拜拜拜拜</td>

</tr>

<tr class="namea" id="a" >

<td>哈哈哈哈哈哈哈哈哈哈哈</td>

</tr>

<tr class="nameb" id="a" >

<td>反反复复反反复复反反</td>

</tr>

<tr class="namea" id="a" >

<td>就斤斤计较斤斤计较斤斤</td>

</tr>

</table>

<input type="button" value="测试隔行变色" onclick="getTr()" />

</body>

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