<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<dl id="mylist">
<dd>哈哈哈哈哈哈哈哈哈</dd>
<dd>哈哈哈哈哈哈哈哈哈</dd>
<dd>哈哈哈哈哈哈哈哈哈</dd>
<dd>哈哈哈哈哈哈哈哈哈</dd>
<dd>哈哈哈哈哈哈哈哈哈</dd>
<dd>哈哈哈哈哈哈哈哈哈</dd>
<dd>哈哈哈哈哈哈哈哈哈</dd>
<dd>哈哈哈哈哈哈哈哈哈</dd>
<dd>哈哈哈哈哈哈哈哈哈</dd>
<dd>哈哈哈哈哈哈哈哈哈</dd>
<dd>哈哈哈哈哈哈哈哈哈</dd>
<dd>哈哈哈哈哈哈哈哈哈</dd>
<dd>哈哈哈哈哈哈哈哈哈</dd>
<dd>哈哈哈哈哈哈哈哈哈</dd>
</dl>
<script type="text/javascript">
window.onload = function ()
{
var items = document.getElementById("mylist");
var items_tr = items.getElementsByTagName("dd");
for (var i=0; i<items_tr.length; i++)
{
if(i%2 == 1)
{
items_tr[i].style.backgroundColor="#3cf";
}
}
}
</script>
</body>
</html>
PS：
1、i%2 == 1 偶数行背景色为蓝色； 0%2=0；1%2=1；2%2=0；3%2=1 .....
2、items_tr[i].style.backgroundColor="#3cf";
要是想调用css样式的话可以 items_tr[i].className="odd";
<style>
.odd {backgruond:#ddd;}
</style>
//鼠标经过时高亮
function highlightRows() {
var rows = document.getElementsByTagName("tr");
for(var i=0; i<rows.length; i++) {
rows[i].oldClassName = rows[i].className; //首先保存之前的class值
rows[i].onmouseover = function() {
addClass(this, "highlight"); //鼠标经过时添加class为highlight的值
}
rows[i].onmouseout = function() {
this.className = this.oldClassName; //鼠标离开时还原之前的class值
}
}
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.hover { background:#eee; }
</style>
</head>
<body>
<table id="list">
<tr><td>隔行换色隔行换色隔行换色</td></tr>
<tr><td>隔行换色隔行换色隔行换色</td></tr>
<tr><td>隔行换色隔行换色隔行换色</td></tr>
<tr><td>隔行换色隔行换色隔行换色</td></tr>
<tr><td>隔行换色隔行换色隔行换色</td></tr>
<tr><td>隔行换色隔行换色隔行换色</td></tr>
<tr><td>隔行换色隔行换色隔行换色</td></tr>
<tr><td>隔行换色隔行换色隔行换色</td></tr>
<tr><td>隔行换色隔行换色隔行换色</td></tr>
</table>
<script type="text/javascript">
function mylist()
{
var items = document.getElementById("list").getElementsByTagName("tr");
for(var i=0; i<items.length; i++)
{
if(i%2 == 1)
{
items[i].style.backgroundColor="#3cf";
}
}
}
function myhover()
{
var item = document.getElementById("list").getElementsByTagName("tr");
for(var i=0; i<item.length; i++)
{
item[i].onmouseover = function()
{
this.setAttribute("class", "hover");
}
item[i].onmouseout = function()
{
this.setAttribute("class", "");
}
}
}
window.onload = function ()
{
mylist();
myhover();
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table id="list">
<tr><td>隔行换色隔行换色隔行换色</td></tr>
<tr><td>隔行换色隔行换色隔行换色</td></tr>
<tr><td>隔行换色隔行换色隔行换色</td></tr>
<tr><td>隔行换色隔行换色隔行换色</td></tr>
<tr><td>隔行换色隔行换色隔行换色</td></tr>
<tr><td>隔行换色隔行换色隔行换色</td></tr>
<tr><td>隔行换色隔行换色隔行换色</td></tr>
<tr><td>隔行换色隔行换色隔行换色</td></tr>
<tr><td>隔行换色隔行换色隔行换色</td></tr>
</table>
<script type="text/javascript">
function show(){
var tab=document.getElementById("list");
var tr=tab.getElementsByTagName("tr");
for(var i=0;i<=tr.length;i++){
if(i%2==0){
tr[i].style.backgroundColor="#ccc";
tr[i].onmouseover=function(){this.style.background="red"};
tr[i].onmouseout=function(){this.style.background="#ccc"}
}else{
tr[i].style.backgroundColor="#fff";
tr[i].onmouseover=function(){this.style.background="red"};
tr[i].onmouseout=function(){this.style.background="#fff"}
}
}
}
window.onload = function ()
{
show();
}
</script>
</body>
</html>
<script> function bgChange(){ var uls = document.getElementById('tableCase').getElementsByTagName('ul'); for(var i=0;i<uls.length;i+=2){ uls[i].className = 'bg'; } var oldStyle; for(var i=0;i<uls.length;i++){ uls[i].onmouseover = function(){ oldStyle = this.className; this.className = 'bg_hover'; } uls[i].onmouseout = function(){ this.className = oldStyle; } } } window.onload = bgChange; </script>