JQuery练习demo1(隔行变色)
2010-05-11 23:11
218 查看
1.效果如图:
代码
代码
<!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> <title></title> <style type="text/css"> #tb { width:150px; text-align:center; } .tr_color { background-color:#888; } </style> <script src="JQuery/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { // var $tr = $("tr"); // for (var i = 0; i < $tr.length; i++) { // if (i % 2 == 0) { // $tr[i].style.backgroundColor = "#888"; // } // } $("tr:even").addClass("tr_color"); //odd为奇书 even偶数 }); </script> </head> <body> <table id="tb"> <tbody> <tr><td>第一行</td></tr><tr><td>第一行</td></tr> <tr><td>第二行</td></tr><tr><td>第二行</td></tr> <tr><td>第三行</td></tr><tr><td>第三行</td></tr> <tr><td>第四行</td></tr><tr><td>第四行</td></tr> <tr><td>第五行</td></tr><tr><td>第五行</td></tr> <tr><td>第六行</td></tr><tr><td>第六行</td></tr> </tbody> </table> </body> </html>
相关文章推荐
- jQuery练习一好友列表变色
- jQuery轻松实现表格的隔行变色,点击行变色
- [原创]持续给力:jQuery实现表格隔行变色效果案例详解
- 使用JavaScript和jQuery实现隔行变色
- 隔行变色【js及JQuery】
- jQuery写隔行变色
- jquery入门―数据删除与隔行变色以及图片预览
- 用JQuery实现表格隔行变色和突出显示当前行
- 基于jQuery的的一个隔行变色,鼠标移动变色的小插件
- jQuery实现隔行变色
- jQuery遍历实现隔行变色
- JS与jQuery实现隔行变色的方法
- jquery实现table表的隔行变色功能
- 简单的jQuery实现表格隔行变色以及鼠标划上突出显示
- JQuery 表格 隔行 奇偶行 变色
- JQuery实现表格隔行换色,鼠标移动变色,点击选择变色
- 使用JQuery实现隔行变色
- jQuery练习2-表格隔行变色
- JQuery编程demo练习
- jquery 实现隔行变色