分别使用js和JQuery实现简单的表格隔行变色以及高亮显示

最新推荐文章于 2023-07-28 10:02:57 发布

原创最新推荐文章于 2023-07-28 10:02:57 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #Jquery

本文介绍了如何使用JavaScript和jQuery分别实现HTML表格的隔行变色以及元素的高亮显示，详细讲解了相关HTML结构、JS代码和jQuery实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、1.1隔行变色html 表格

使用<thead>和<tbody>标签拆分表头和内容

<table border="1" width="500" height="50" align="center" id="tb1">
		<thead>
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>22</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>25</td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>27</td>
			</tr>
			<tr>
				<td>4</td>
				<td>赵六</td>
				<td>29</td>
			</tr>
			<tr>
				<td>5</td>
				<td>田七</td>
				<td>30</td>
			</tr>
			<tr>
				<td>6</td>
				<td>汾九</td>
				<td>20</td>
			</tr>
		</tbody>
	</table>

1.2js部分

window.onload = function() {
        var tb1 = document.getElementById("tb1");
        //获取表格中tbody的行数
        var len = tb1.tBodies[0].rows.length;
        //对tbody里面的行进行遍历
        for(var i=0;i<len;i++){
        	if(i%2==0){
        		//对偶数行设置背景颜色
        		tb1.tBodies[0].rows[i].style.backgroundColor="pink";
        	}else{
        		//对奇数行设置背景颜色
        		tb1.tBodies[0].rows[i].style.backgroundColor="blue";
        	}
        }        
	}

1.3JQuery部分

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			//1.页面加载
			$(function(){
				/*//2.获取tbody下面的偶数行并设置背景颜色
				$("tbody tr:even").css("background-color","yellow");
				//3.获取tbody下面的奇数行并设置背景颜色
				$("tbody tr:odd").css("background-color","green");*/
				
				//2.获取tbody下面的偶数行并设置背景颜色
				$("tbody tr:even").addClass("even");
				//$("tbody tr:even").removeClass("even");
				//3.获取tbody下面的奇数行并设置背景颜色
				$("tbody tr:odd").addClass("odd");
			});
		</script>

二、2.1高亮显示html

<table border="1" width="500" height="50" align="center" id="tb1">
		<thead>
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
		</thead>
		<tbody>
			<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
				<td>1</td>
				<td>张三</td>
				<td>22</td>
			</tr>
			<tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">
				<td>2</td>
				<td>李四</td>
				<td>25</td>
			</tr>
			<tr onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">
				<td>3</td>
				<td>王五</td>
				<td>27</td>
			</tr>
			<tr onmouseover="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4','out')">
				<td>4</td>
				<td>赵六</td>
				<td>29</td>
			</tr>
			<tr onmouseover="changeColor('tr5','over')" id="tr5" onmouseout="changeColor('tr5','out')">
				<td>5</td>
				<td>田七</td>
				<td>30</td>
			</tr>
			<tr onmouseover="changeColor('tr6','over')" id="tr6" onmouseout="changeColor('tr6','out')">
				<td>6</td>
				<td>汾九</td>
				<td>20</td>
			</tr>
		</tbody>
	</table>

2.2高亮显示js部分

function changeColor(id,flag) {
		if(flag=='over'){
		document.getElementById(id).style.backgroundColor="red";			
		}else if(flag=='out'){
		document.getElementById(id).style.backgroundColor="";			
		}
	}

2.3高亮显示JQuery部分

function changeColor(id,flag) {
				if(flag=='over'){
				    $("#"+id).css("background-color","red");			
				}else if(flag=='out'){
					$("#"+id).css("background-color","");;			
				}
			}