【JavaScript-练习】表格隔行变色

最新推荐文章于 2022-11-09 11:37:42 发布

愿所奋斗皆所得

最新推荐文章于 2022-11-09 11:37:42 发布

阅读量273

点赞数

分类专栏： JavaWeb学习文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_40740272/article/details/105037263

版权

JavaWeb学习专栏收录该内容

10 篇文章 1 订阅

订阅专栏

获取除过标题栏的其他所有的tr行元素，循环进行判断奇偶行，通过className 设置不同的class，从而设置不同的样式。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>07-表格隔行变色.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
table {
	border: 1px red solid;
	width: 500px;
	margin: auto;
}

td {
	border: 1px blue solid;
	margin: 10px;
	padding: 10px;
	text-align: center;
}

th {
	background-color: maroon;
}

.one {
	background-color: blue;
}

.two {
	background-color: green;
}

.over {
	background-color: aqua;
}
</style>

<script type="text/javascript">
    window.onload = function () {
    //    选中所有的tr,除过第一个行
        var line = document.getElementsByTagName("tr");

    //    判断奇数行/偶数行
        for (var i = 1; i < line.length; i++){
            // i % 2 是求余，当余数为0时，说明是偶数
            // 当余数为1时，说明这是一个奇数行
            if ( i % 2 == 0) {
                line[i].className = "two";
            } else {
                line[i].className = "one";
            }
            // 定义一个变量来保存修改这个class属性值之前的旧的样式名
            var oldClass = "";
            // 当鼠标移进去的时候的事件
            line[i].onmouseover = function(){
                oldClass = this.className;
                this.className = "over";
            }
            // 当鼠标移出的时候的事件
            line[i].onmouseout = function() {
                this.className = oldClass;
            }
        }
    }
</script>

</head>

<body>
	<table>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>地址</th>
		</tr>
		<tr class="one">
			<td>高杰</td>
			<td>18</td>
			<td>闵行</td>
		</tr>
		<tr class="two">
			<td>李刚</td>
			<td>16</td>
			<td>上海</td>
		</tr>
		<tr>
			<td>赵士龙</td>
			<td>22</td>
			<td>东莞</td>
		</tr>
		<tr>
			<td>鲁宾</td>
			<td>29</td>
			<td>北京</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
	</table>



</body>
</html>

愿所奋斗皆所得

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript-练习】表格隔行变色

获取除过标题栏的其他所有的tr行元素，循环进行判断奇偶行，通过className 设置不同的class，从而设置不同的样式。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>07-表格隔行变色.html</title>...
复制链接

扫一扫