实现隔行变色代码如下
描述:通过jQuery控制表格的奇数行和偶数行的颜色不一样，鼠标经过的时候，颜色变成白色，鼠标离开，颜色恢复原来的颜色。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>高级隔行变色</title><style>*{padding: 0;margin: 0;}.form{width: 500px;margin: 100px auto 0;}table{border-collapse: collapse;border-spacing: 0;border: 1px solid #404060;width: 500px;text-align: center;}th,td{border: 1px solid #404060;padding: 10px;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}</style><script src="./jquery.min.js"></script></head><body><div class="form"><table><thead><tr><th>学号</th><th>姓名</th><th>成绩</th></tr></thead><tbody class="target"><tr><td>001</td><td>小王</td><td>100</td></tr><tr><td>002</td><td>小赵</td><td>100</td></tr><tr><td>003</td><td>小李</td><td>100</td></tr><tr><td>004</td><td>小明</td><td>100</td></tr><tr><td>005</td><td>小刚</td><td>100</td></tr><tr><td>006</td><td>小明</td><td>100</td></tr><tr><td>007</td><td>小明</td><td>100</td></tr></tbody></table></div><script>$(function () {var trodd = $(".form tr:odd");var treven = $(".form tr:even");trodd.css("background","#a3a3a3");treven.css("background","#ccc");//计数器，记录鼠标经过之前的颜色var color = "";$(".form tr").mouseenter(function () {color = $(this).css("background");$(this).css("background","#fff");});$(".form tr").mouseleave(function () {$(this).css("background",color);});});</script></body></html>
