表格隔行换色

最新推荐文章于 2024-02-01 15:01:05 发布

qq_27493017

最新推荐文章于 2024-02-01 15:01:05 发布

阅读量207

点赞数

本文链接：https://blog.csdn.net/qq_27493017/article/details/101050266

版权

本文介绍了如何使用CSS和JavaScript实现表格隔行换色的效果，包括基础的CSS样式设置以及进一步的优化方法。

摘要由CSDN通过智能技术生成

1、基础

表格：

<table width="400" border="1 red" cellspacing="0" cellpadding="0">
    <tr class="os">
        <td>一行一列</td>
        <td>一行二列</td>
        <td>一行三列</td>
    </tr>
    <tr class="js">
        <td>二行一列</td>
	    <td>二行二列</td>
		<td>二行三列</td>
	</tr>
	<tr class="os">
		<td>三行一列</td>
		<td>三行二列</td>
		<td>三行三列</td>
	</tr>
	<tr class="js">
		<td>四行一列</td>
		<td>四行二列</td>
		<td>四行三列</td>
	</tr>
	<tr class="os">
		<td>五行一列</td>
		<td>五行二列</td>
		<td>五行三列</td>
	</tr>
</table>

css样式：

<style>
	.js{
		background-color:red;
	}
	.os{
		background-color:blue;
	}
</style>

2、优化

<table width="400" border="1 red" cellspacing="0" cellpadding="0">
    <tr>
        <td>一行一列</td>
        <td>一行二列</td>
        <td>一行三列</td>
    </tr>
    <tr class="js">
        <td>二行一列</td>
	    <td>二行二列</td>
		<td>二行三列</td>
	</tr>
	<tr>
		<td>三行一列</td>
		<td>三行二列</td>
		<td>三行三列</td>
	</tr>
	<tr>
		<td>四行一列</td>
		<td>四行二列</td>
		<td>四行三列</td>
	</tr>
	<tr>
		<td>五行一列</td>
		<td>五行二列</td>
		<td>五行三列</td>
	</tr>
</table>

css样式：

<style>
	.js{
		background-color:red;
	}
	.os{
		background-color:blue;
	}
    .omo{
    	background-color:yellow;
	}
</style>

js:

<script>
	window.onload=function(){
		var trs = document.getElementsByTagName("tr");
		console.log(trs.length);
		for(var i = 0;i<trs.length;i++){
			if(i % 2 == 0){
				trs[i].className = "os";
			}else{
				trs[i].className = "js";
			}
            //鼠标移入移除事件
            var temp;
			//鼠标移入，改变颜色
			trs[i].onmouseover = function(){
				temp = this.className;
				this.className = "omo";
			}//鼠标移出，恢复为原来的颜色
			trs[i].onmouseout = function(){
				this.className = temp;
			}
		}
	}
</script>