表格隔行变色jq代码

1、在编辑前先引入jq库。，否则没有隔行变色的效果。表格代码：<tablewidth="400"border=&qu泠贾高框ot;0"class="stripe"cellpadding="0"cellspacing="1"><tr><thwidth="92">1</th><thwidth="339">2</th><thwidth="465">3</th></tr><tr><tdwidth="92">4</td><tdwidth="339">5</td><tdwidth="465">6</td></tr><tr><tdwidth="92">7</td><tdwidth="339">8</td><tdwidth="465">9</td></tr><tr><tdwidth="92">10</td><tdwidth="339">11</td><tdwidth="465">12</td></tr></table>

2、此变色换色原理是，通过JQ识别table tr td的双数单数，even以及odd，对应单数双数给予赋予不同CSS样式，通过不同背景，即可实现隔行换色变色效果，当鼠标经过时候JQ调用另外设置的tr td背景，实现鼠标经过背景颜色也跟着变化。下图是原始默认是表格样式：

3、css代码body{margin:0auto;text-align:center}table{margin:0auto;width:410px}table{border:1pxsolid#000}tabletrth{height:28px;line-height:28px;background:#999}table.stripetrtd{height:28px;line-height:28px;text-align:center;background:#FFF;vertical-align:middle;}table.stripetr.alttd{background:#F2F2F2;}table.stripetr.overtd{background:#EEECEB;}

4、隔行变色j孥恶膈茯q代码$(document).ready(function(){ $(".stripetr").mouseover(function(){ //鼠标移到class为stripe的表格的tr上时，执行函数 $(this).addClass("over");}).mouseout(function(){//给这行添加class值为over，并且当鼠标一出该行时执行函数$(this).removeClass("over");})//移除该行的class$(".stripetr:even").addClass("alt");//给class为stripe的表格的偶数行添加class值为alt});