高级各行高亮显示 

<body>
    <table style="width:600px;" border="1" cellspacing="0" cellpadding="0">
		<tbody id="tbody">
			<tr>
				<td>序号1</td>
				<td>张三</td>
				<td>28</td>
				<td>保定</td>
			</tr>
			<tr>
				<td>序号1</td>
				<td>张三</td>
				<td>28</td>
				<td>保定</td>
			</tr>
			<tr>
				<td>序号1</td>
				<td>张三</td>
				<td>28</td>
				<td>保定</td>
			</tr>
			<tr>
				<td>序号1</td>
				<td>张三</td>
				<td>28</td>
				<td>保定</td>
			</tr>
			<tr>
				<td>序号1</td>
				<td>张三</td>
				<td>28</td>
				<td>保定</td>
			</tr>
		</tbody>
	</table>
</body>

<script>
    var tbody = document.getElementById('tbody').children
    for(let i = 0; i < tbody.length;i++){
        if(i % 2 == 0){
            tbody[i].style.backgroundColor = 'pink'
        }else{
            tbody[i].style.backgroundColor = 'blue'
        }


        var myColor = ''
        tbody[i].onmouseover = function(){
            myColor = this.style.backgroundColor
            this.style.backgroundColor = '#ccc'
        }
        tbody[i].onmouseout = function(){
            this.style.backgroundColor = myColor
        }
    }
</script>
posted @ 2021-03-20 17:56  yuanliy  阅读(4)  评论(0)  编辑  收藏  举报