手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery轻松实现表格的隔行变色和点击行变色的实例代码
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
摘要:jQuery轻松实现表格的隔行变色和点击行变色的实例代码使用jquery设置表格样式.even{background-color:red;}...

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>使用jquery设置表格样式</title> <style> .even{ background-color:red; } .odd{ background-color:green; } .selected{ background-color:#FF6; } .se{ background-color:#666; } </style> <script language="javascript" src="../../include/jquery.js"></script> <script> $(document).ready(function(){ //隔行表色 $("tr:even").addClass("even"); $("tr:odd").addClass("odd"); //点击变色 $("tr").toggle( function(){ $(this).addClass("selected"); },function (){ $(this).removeClass("selected"); } ); //滑动变色 $("tr").mouseover(function (){ $(this).addClass("se"); }).mouseout(function (){ $(this).removeClass("se"); }); }); </script> </head> <body> <table width="500" border="1" align="center"> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>

以上这篇jQuery轻松实现表格的隔行变色和点击行变色的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持查字典教程网。

【jQuery轻松实现表格的隔行变色和点击行变色的实例代码】相关文章:

javascript实现可拖动变色并关闭层窗口实例

原生js实现的贪吃蛇网页版游戏完整实例

javasript实现密码的隐藏与显示

jQuery实现表格行上移下移和置顶的方法

jquery实现动态改变div宽度和高度

js实现精美的银灰色竖排折叠菜单

jQuery使用zTree插件实现树形菜单和异步加载

jquery实现弹出层效果实例

jQuery实现div随意拖动的实例代码(通用代码)

Js和JQuery获取鼠标指针坐标的实现代码分享

精品推荐
分类导航