JQuery双色表格制作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="js/jquery-1.4.2.min.js"></script><script language="javascript" >$(document).ready(function(){$(".stripe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");}) $(".stripe tr:even").addClass("alt");});</script><style>th{background:#0066FF;color:#FFFFFF;line-height:20px;height:30px;}td{ padding:6px 11px;border-bottom:solid 1px #093;vertical-align:top;text-align:center;}td*{padding:6px 11px;}tr.alt td{background:#ecf6fc;}tr.over td{background:#bcd4ec;}</style></head><body><table width="50%" border="0" cellpadding="0" cellspacing="0" id="tdata"><tr><td>asdfasdfasdf</td><td>f342</td><td>rtyr</td><td>5y5</td><td>asdfasdfasdf</td></tr><tr><td>asdfasdfasdf</td><td>f342</td><td>rtyr</td><td>5y5</td><td>asdfasdfasdf</td></tr><tr><td>asdfasdfasdf</td><td>f342</td><td>rtyr</td><td>5y5</td><td>asdfasdfasdf</td></tr><tr><td>asdfasdfasdf</td><td>f342</td><td>rtyr</td><td>5y5</td><td>asdfasdfasdf</td></tr></table></body></html>
?
说明:.style的意思是?? 获取元素节点? ,是指.style样式下的某个元素,所以上述红色背景区域可以有以下三中方式表示!
?
1.$("table tr")??????????? //table下面的 tr 元素??????????? 但是这个是全局的
2.$(".style tr")?????????? //应用了这个样式的具体元素?? 这个是局部的
3.$("#tdata tr")???????? //#号是id名称,意味tdata下面的tr!
?
mouseover? mouseout? 是鼠标移动时间
addClass???? removeClass?? 增加和删除css样式???? 也可以直接添加? 用.css("央视名称","属性值")的方法替换addClass
?
注意:几乎每一步JQuery操作都会返回一个JQuery对象,所以可以进行链式操作,所以上面的mousevoer,mouseout同时在一起!
?