`
哈达f
  • 浏览: 114518 次
  • 性别: Icon_minigender_1
  • 来自: 广西
社区版块
存档分类
最新评论

每行间隔显示颜色

阅读更多 
<!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>
<link rel="stylesheet" href="tab.css" />
<style type="text/css">
.one{
	background-color:#33FFCC;
	}
.two{
	background-color:#FFFF66;
	}
.over{
	background-color:#00FF00;
	}
</style>

<script type="text/javascript" src="../Day26/doctool.js"></script>

<script type="text/javascript">
//行颜色间隔显示
function trcolor()
{
	var tabNode = byTag("table")[0];
	
	var trs = tabNode.rows;
	
	for(var x=1; x<trs.length; x++)
	{
		if(x%2==1)
			trs[x].className = "one";
		else
			trs[x].className = "two";		
			
		trs[x].onmouseover = function()
		{
			name = this.className;
			this.className = "over";
		};
		
		trs[x].onmouseout = function()
		{
			this.className = name;
		}
	}
}

var name;

/*
function over(trNode)
{
	name = trNode.className;
	trNode.className = "over";
}

function out(trNode)
{
	trNode.className = name;
}*/
window.onload = trcolor;
</script>

</head>

<body>
<table>
	<tr>	
    	<th>姓名</th>
        <th><a href="javascript:void(0)" onclick="sorttab()">年龄</a></th>
        <th>地址</th>
    </tr>
    
    <tr>	
    	<td>张三</td>
        <td>30</td>
        <td>北京</td>
    </tr>
    <tr>	
    	<td>李四</td>
        <td>4</td>
        <td>上海</td>
    </tr>
    <tr>	
    	<td>王武</td>
        <td>23</td>
        <td>广州</td>
    </tr>
    <tr>	
    	<td>赵六</td>
        <td>27</td>
        <td>南京</td>
    </tr>
    <tr>	
    	<td>周七</td>
        <td>25</td>
        <td>大连</td>
    </tr>
    <tr>	
    	<td>孙八</td>
        <td>29</td>
        <td>铁岭</td>
    </tr>
    <tr>	
    	<td>赵六</td>
        <td>27</td>
        <td>南京</td>
    </tr>
    <tr>	
    	<td>周七</td>
        <td>25</td>
        <td>大连</td>
    </tr>
    <tr>	
    	<td>孙八</td>
        <td>29</td>
        <td>铁岭</td>
    </tr>
</table>
</body>
</html>

 

分享到：
| 排序表格内容
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics