zoukankan html css js c++ java

javascript实现隔行变色

<!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>

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>

查看全文

相关阅读:
webservice的cxf的客户端
 webservice用cxf发布SOAP
webservice声明发布SOAP1.2
webservice使用注解修改WSDL内容
 webservice获取天气信息
 结巴分词原理介绍
 Pytorch学习记录-torchtext和Pytorch的实例（使用神经网络训练Seq2Seq代码）
【Pandas】Pandas求某列字符串的长度，总结经验教训
 UTF-8与UTF-8 BOM
logging.basicConfig函数

原文地址：https://www.cnblogs.com/huanlei/p/2430561.html