[jQuery]짝수행과 홀수행의 배경색 변경 플러그인

개발관련/jQuery 2012. 3. 16. 17:14 |
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<style type="text/css">
    .odd { background-color:Silver; }
    .even { background-color:Aqua; }
</style>   
<script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
    //[!] 배경색 변경을 jQuery 플러그인으로 업그레이드하자.
    $.fn.alternateRowColors = function () {
        $('tbody tr:odd', this).removeClass('even').addClass('odd');
        $('tbody tr:even', this).removeClass('odd').addClass('even');
        return this;
    };   
    $(document).ready(function () {
        $('table.tbl').each(function () {
            var $table = $(this);
            // 플러그인 호출                   
            $table.alternateRowColors();
        });               
    });
</script>
 
    <table class="tbl" border="1">
        <thead>
            <tr>
                <th> </th>
                <th>제목</th>
                <th>저자</th>
                <th>출간일</th>
                <th>가격</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><img src="../../ProductImages/thumbs/BOOK-01.jpg"></td>
                <td>쉽게 배우는 ASP.NET 2.0</td>
                <td>박용준</td>
                <td>2008</td>
                <td>20000</td>
            </tr>
            <tr>
                <td><img src="../../ProductImages/thumbs/COM-01.jpg"></td>
                <td>.NET Bible</td>
                <td>박용준</td>
                <td>2003</td>
                <td>25000</td>
            </tr>
            <tr>
                <td><img src="../../ProductImages/thumbs/Online-01.jpg"></td>
                <td>정보처리기능사 실기</td>
                <td>박용준</td>
                <td>2005</td>
                <td>18000</td>
            </tr>
        </tbody>
    </table>

 제목저자출간일가격
쉽게 배우는 ASP.NET 2.0 박용준 2008 20000
.NET Bible 박용준 2003 25000
정보처리기능사 실기 박용준 2005 18000

'개발관련 > jQuery' 카테고리의 다른 글

[jQuery]카루셀(Carrousel) 플러그인  (0) 2012.03.16
[jQuery]테이블의 헤더 클릭시 해당 열 정렬  (0) 2012.03.16
[jQuery]짝수행과 홀수행의 배경색 변경  (0) 2012.03.16
[jQuery]툴팁 : 풍선 도움말  (0) 2012.03.16
[jQuery]체크박스 전체선택 및 해제  (0) 2012.03.16
Posted by 파노카페
:

티스토리툴바