| TablePlugIn.htm |
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>짝수행과홀수행의 배경색 변경 플러그인</title> <style type="text/css"> .odd{ background-color:Silver;} .even{ background-color:Aqua;} </style> <script src="jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> <script type="text/javascript"> $.fn.alternateRowColors = function () { $('tbodytr:odd', this).removeClass('even').addClass('odd'); $('tbodytr:even', this).removeClass('odd').addClass('even'); returnthis; }; $(document).ready(function () { $('table.tbl').each(function () { var$table = $(this); // 플러그인 호출 $table.alternateRowColors(); }); }); </script> </head> <body> <table class="tbl" border="1"> <thead> <tr> <th> </th> <th>제목</th> <th>직업</th> <th>이름</th> <th>비고</th> </tr> </thead> <tbody align="center"> <tr> <td><img src="img/j1.jpg" /></td> <td>완전좋앙</td> <td>텔런트</td> <td>조선옥</td> <td>너무좋앙</td> </tr> <tr> <td><img src="img/j2.jpg" /></td> <td>완전좋앙</td> <td>텔런트</td> <td>조선옥</td> <td>완전이뻐!</td> </tr> <tr> <td><img src="img/j3.jpg" /></td> <td>완전좋앙</td> <td>텔런트</td> <td>조선옥</td> <td>내이상형!!</td> </tr> <tr> <td colspan="5">홀/짝배경색이 같아요</td> </tr> <tr> <td colspan="5">홀/짝배경색이 같아요</td> </tr> <tr> <td colspan="5">홀/짝배경색이 같아요</td> </tr> </tbody> </table> </body> </html> |
| 결과화면 |
[그림82-1] |
TablePlugIn.htm'jQuery | javascript | CSS' 카테고리의 다른 글
| 84.jQuery - ToolTip : 도움말/풍선말 (13.Sample ) (0) | 2009.11.18 |
|---|---|
| 83.jQuery - TableSorting (정렬) (13.Sample ) (0) | 2009.11.18 |
| 81.jQuery - TableEvenOdd (13.Sample ) (0) | 2009.11.18 |
| 80.jQuery - CheckBox AllCheck (13.Sample ) (0) | 2009.11.18 |
| 79.jQuery - 사진 상세보기 플러그인 만들기 (12.PlugIn ) (0) | 2009.11.17 |
Comments