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

一、1.1隔行变色html 表格

使用和标签拆分表头和内容

		

			

				
编号
				
姓名
				
年龄
			
		
		

			

				
1
				
张三
				
22
			
			

				
2
				
李四
				
25
			
			

				
3
				
王五
				
27
			
			

				
4
				
赵六
				
29
			
			

				
5
				
田七
				
30
			
			

				
6
				
汾九
				
20
			
		
	

1.2js部分

window.onload = function() {
        var tb1 = document.getElementById("tb1");
        //获取表格中tbody的行数
        var len = tb1.tBodies[0].rows.length;
        //对tbody里面的行进行遍历
        for(var i=0;i

1.3JQuery部分 

 

二、2.1高亮显示html

		

			

				
编号
				
姓名
				
年龄
			
		
		

			

				
1
				
张三
				
22
			
			

				
2
				
李四
				
25
			
			

				
3
				
王五
				
27
			
			

				
4
				
赵六
				
29
			
			

				
5
				
田七
				
30
			
			

				
6
				
汾九
				
20
			
		
	

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","");;			
				}
			}