隔行变色jquery 实现

拼搏现实的明天。 2022-06-06 01:18 218阅读 0赞

<!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=gb2312" />
    <title>jquery 奇偶变色</title>
    <script type="text/javascript" src="Themes/js/jquery-1.3.2.min.js"></script>
    <script>
    $(document).ready(function() {
    $("#hacker").find("tr").addClass("odd");
    $("#hacker").find("tr:even").addClass("even");
    // $("tr").addClass("odd");
     //$("tr:even").addClass("even"); //奇偶变色，添加样式
     //$("#hacker tr").addClass("odd");
    //$("#hacker tr:even").addClass("even");
    });
    </script>
    <style>
    #hacker tr:hover{background-color:red;}
    
    .odd {background-color: #fff; /* pale yellow for odd rows */}
    .even {background-color: #000; /* pale blue for even rows */}
    </style>
    </head>
    <body>
    <table id="hacker">
    <tr>
    <td>As You Like It</td>
    <td>Comedy</td>
    </tr>
    <tr>
    <td>All's Well that Ends Well</td>
    <td>Comedy</td>
    </tr>
    <tr>
    <td>Hamlet</td>
    <td>Tragedy</td>
    </tr>
    <tr>
    <td>Macbeth</td>
    <td>Tragedy</td>
    </tr>
    <tr>
    <td>Romeo and Juliet</td>
    <td>Tragedy</td>
    </tr>
    <tr>
    <td>Henry IV, Part I</td>
    <td>History</td>
    </tr>
    <tr>
    <td>Henry V</td>
    <td>History</td>
    </tr>
    </table>
    </body>
    </html>

三种方法，可以找到合适的

发表评论取消回复

表情：

评论列表（有 0 条评论，218人围观）

还没有评论，来说两句吧...

相关阅读

相关使用CSS3实现表格隔行/隔列变色

话少说，先看效果，如果不是你想要的，你可以撤了~ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_...

冷不防/ 2024年04月19日 15:11/ 0 赞/ 31 阅读

相关 4.JavaScript实现表格隔行变色

css代码如下： <style> { margin: 0; padding: 0;

﹏ヽ暗。殇╰゛Y/ 2022年12月12日 04:38/ 0 赞/ 146 阅读

相关 jquery实现隔行变色

原生js var tab = document.getElementByTagName('table')[0]; var tr = tab.getElemen

青旅半醒/ 2022年08月12日 05:58/ 0 赞/ 185 阅读

相关 ListView隔行变色

ListView隔行变色也许我们工作中或用到，有的客户会要求你变换listView的颜色，这样看起来比较好看所以我就自己写了关于隔行变色的代码。不多说直接上代码：这是

深碍√TFBOYSˉ_/ 2022年07月13日 09:49/ 0 赞/ 211 阅读

相关 js 实现隔行变色

![效果图][SouthEast] -------------------- <!DOCTYPE html> <html lang="en"> <h

向右看齐/ 2022年06月17日 23:08/ 0 赞/ 175 阅读

相关 JavaScript-运算符（%）隔行变色

JavaScript\-运算符（%）\隔行变色\ 用到的知识点： %取模。感谢智能社。全部代码如下： ![这里写图片描述][SouthEast] !

古城微笑少年丶/ 2022年06月11日 06:53/ 0 赞/ 184 阅读

相关隔行变色jquery 实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

拼搏现实的明天。/ 2022年06月06日 01:18/ 0 赞/ 219 阅读

相关 jquery表格隔行变色

结果如下图: ![这里写图片描述][70] <!doctype html> <html> <head> <meta http-eq

客官°小女子只卖身不卖艺/ 2022年05月21日 02:38/ 0 赞/ 210 阅读

相关 jQuery表格之隔行变色

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

清疚/ 2021年12月10日 00:49/ 0 赞/ 303 阅读

相关 jq 隔行变色（横、纵)

jQ不能使用this.css来设置样式,使用$(this).css来设置样式 $('标签').hover(函数1，函数2); 分别定义了鼠标悬浮和鼠标

妖狐艹你老母/ 2021年07月24日 22:04/ 0 赞/ 339 阅读