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