jQuery表格隔行變色
阿新 • • 發佈：2021-11-14
效果圖：
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01__表格隔行變色</title> <style> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } #data { width: 600px; } #data, td, th { border-collapse: collapse; border: 1px solid #aaaaaa; } th, td { height: 28px; } #data thead { background-color: #333399; color: #ffffff; } .odd { background-color: #ccccff; } </style> </head> <body> <table id="data"> <thead> <tr> <th>姓名</th> <th>工資</th> <th>入職時間</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>Tom</td> <td>$3500</td> <td>2010-10-25</td> <td><a href="javascript:void(0)">刪除</a></td> </tr> <tr> <td>Mary</td> <td>$3400</td> <td>2010-12-1</td> <td><a href="javascript:void(0)">刪除</a></td> </tr> <tr> <td>King</td> <td>$5900</td> <td>2009-08-17</td> <td><a href="javascript:void(0)">刪除</a></td> </tr> <tr> <td>Scott</td> <td>$3800</td> <td>2012-11-17</td> <td><a href="javascript:void(0)">刪除</a></td> </tr> <tr> <td>Smith</td> <td>$3100</td> <td>2014-01-27</td> <td><a href="javascript:void(0)">刪除</a></td> </tr> <tr> <td>Allen</td> <td>$3700</td> <td>2011-12-05</td> <td><a href="javascript:void(0)">刪除</a></td> </tr> </tbody> </table> <script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript"> //用的是>，所以找的是直屬的子元素，是親子，不是孫子等後代元素 //找id為data的table下的元素 $('#data>tbody>tr:odd').css('background', '#ccccff') // $('#data>tbody>tr:odd').addClass('odd') //$('#data>tbody>tr:odd').attr('class', 'odd') </script> </body> </html>