利用JQuery和JS实现奇偶行背景颜色自定义效果

JQuery实现: 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script> <script type="text/javascript"> $(function(){ //可以是:$('#t1 tbody tr:even').css('background','red'); $('#t1 > tbody tr:even').css('background','red'); $('#t1 > tbody tr:odd').css('background','blue'); }); </script> </head> <body> <table id="t1" width="500px" align="center"> <tbody> <tr><td>aaaaaaa</td></tr> <tr><td>bbbbbbb</td></tr> <tr><td>ccccccc</td></tr> <tr><td>ddddddd</td></tr> <tr><td>eeeeeee</td></tr> <tr><td>fffffff</td></tr> <tr><td>ggggggg</td></tr> <tr><td>hhhhhhh</td></tr> </tbody> </table> </body> </html> JS实现：复制代码代码如下: <span style="color:#333333;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script type="text/javascript"> //页面加载事件 window.onload=function(){ //获取table var tb1 = document.getElementById("t1"); //获取table中的tbody var tbody = tb1.getElementsByTagName("tbody")[0]; //获取tr var trs = tbody.getElementsByTagName("tr"); //根据奇、偶行显示不同的背景颜色 for(var i=0; i<trs.length;i++){ if(i%2==0){ trs[i].style.backgroundColor="red"; }else{ trs[i].style.backgroundColor="blue"; } } } </script> </head> <body> <table id="t1" width="500px" align="center"> <tbody> <tr><td>aaaaaaa</td></tr> <tr><td>bbbbbbb</td></tr> <tr><td>ccccccc</td></tr> <tr><td>ddddddd</td></tr> <tr><td>eeeeeee</td></tr> <tr><td>fffffff</td></tr> <tr><td>ggggggg</td></tr> <tr><td>hhhhhhh</td></tr> </tbody> </table> </body> </html>

　　推荐阅读

　　extjs 04_grid 单击事件新发现

EXTJS GRID 中单击行和单元格获得行或者单元格的内容(数据) Js代码复制代码代码如下: grid.addListener('cellclick',cellclick); function cellclick(grid, rowIndex, columnIndex, e) { var record = grid.get>>>详细阅读

本文标题：利用JQuery和JS实现奇偶行背景颜色自定义效果

地址：http://www.17bianji.com/kaifa2/JS/22924.html

1/2 1