分别使用js和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","");;			
				}
			}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值