블로그 이미지
Magic_kit
study 관련자료를 한곳으로 자기 개발 목적으로 재태크 재무 관리 목적으로 일상생활의 팁을 공유 하기 위하여 블로그를 개설 하였습니다.

calendar

 «  » 2025.1
일 월 화 수 목 금 토
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

Category

Recent Post

Recent Comment

Archive

2009. 11. 25. 13:29 .Net Project/Jquery 1.3.2

86장 JQuerySample 헤드 클릭시 해당 정렬 (TableSorting.htm)

반응형
 TableSorting.htm
 

<!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>

    <title>테이블 헤더 클릭시 해당 열 정렬 </title>

    <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">

        //[!] 배경색 변경을 플러그인으로 업그레이드 하자
            $.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();

                // start table sort

                $('th', $table).each(function (column) {

                    // 헤더 클래스가  정렬 되어 있다면 ABC 순으로 정렬(오름차순)

                    if ($(this).is('.sort-alpha')) {

                        // 클릭시 정렬 실행

                        var direction = -1; //

                        $(this).click(function () {

                            direction = -direction; // 현재 행 가져오기 

                            var rows = $table.find('tbody > tr').get();
                    //자바 스크립트의 sort 함수를 사용해서 오름차순 정렬

                  rows.sort(function (a, b) {

                  var keyA = $(a).children('td').eq(column).text().toUpperCase();

                  var keyB = $(b).children('td').eq(column).text().toUpperCase();

 

                                if (keyA < keyB) return -direction; //

                                if (keyA > keyB) return direction; //

                                return 0;

                            });

                            // 정렬된 테이블을 추가
                 $.each(rows, function (index, row) { $table.children
                         ('tbody').append(row) });

                 $table.alternateRowColors(); // 재정렬
                        });

                    }

                }); // end table sort                    

            }); // end each()               

        });   // end ready()  

    </script>

</head>

<body>

    <table class="tbl" border="1">

        <thead>

            <tr>

                <th>&nbsp;</th>

                <th class="sort-alpha">제목</th>

                <th class="sort-alpha">저자</th>

                <th class="sort-alpha">출간일</th>

                <th class="sort-alpha">가격</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>

</body>

</html> 




반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

88장 JQueryModel 카루셀 플러그인 (Carrousel.htm)  (0) 2009.11.25
87장 JQueryModel 텍스트박스 자동 완성 기능(AutoComplete.htm)  (0) 2009.11.25
85장 JQuerySample 짝수행과 홀수행의 배경색 변경 (TablePlugIn.htm)  (0) 2009.11.25
84장 JQuerySample 예시 테이블 (TableEvenOdd.htm)  (0) 2009.11.25
83장 JQuerySample 예시 테이블 (Table.htm)  (0) 2009.11.25
posted by Magic_kit
2009. 11. 25. 13:23 .Net Project/Jquery 1.3.2

85장 JQuerySample 짝수행과 홀수행의 배경색 변경 (TablePlugIn.htm)

반응형
 TablePlugIn.htm
 

<!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>

    <title>짝수 행과 홀수행의 배경색 변경 플러그인</title>

    <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">

        //[!] 배경색 변경을 플러그인 변경으로 업그레이드 하자
            $.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>

</head>

<body>

    <table class="tbl" border="1">

        <thead>

            <tr>

                <th>&nbsp;</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>

</body>

</html> 




반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

87장 JQueryModel 텍스트박스 자동 완성 기능(AutoComplete.htm)  (0) 2009.11.25
86장 JQuerySample 헤드 클릭시 해당 정렬 (TableSorting.htm)  (0) 2009.11.25
84장 JQuerySample 예시 테이블 (TableEvenOdd.htm)  (0) 2009.11.25
83장 JQuerySample 예시 테이블 (Table.htm)  (0) 2009.11.25
82장 JQuerySample 체크 박스 선택/해제 (CheckBoxAllCheck.htm)  (0) 2009.11.25
posted by Magic_kit
2009. 11. 25. 12:21 .Net Project/Jquery 1.3.2

84장 JQuerySample 예시 테이블 (TableEvenOdd.htm)

반응형
TableEvenOdd.htm
 

<!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>

    <title>짝수행과 홀수 행의  배경색 변경 </title>

    <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">

        $(document).ready(function () {

            $('table.tbl tbody tr:odd').addClass('odd');

            $('table.tbl tbody tr:even').addClass('even');             

        });

    </script>

</head>

<body>

    <table class="tbl" border="1">

        <thead>

            <tr>

                <th>&nbsp;</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>

</body>

</html> 




반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

86장 JQuerySample 헤드 클릭시 해당 정렬 (TableSorting.htm)  (0) 2009.11.25
85장 JQuerySample 짝수행과 홀수행의 배경색 변경 (TablePlugIn.htm)  (0) 2009.11.25
83장 JQuerySample 예시 테이블 (Table.htm)  (0) 2009.11.25
82장 JQuerySample 체크 박스 선택/해제 (CheckBoxAllCheck.htm)  (0) 2009.11.25
81장 JQueryPlugIn 사진 상세 보기 (RedPlusPhotoView.htm)  (0) 2009.11.25
posted by Magic_kit
2009. 11. 25. 12:18 .Net Project/Jquery 1.3.2

83장 JQuerySample 예시 테이블 (Table.htm)

반응형
Table.htm 

 

<!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>

    <title>예시 테이블</title>

</head>

<body>

    <table class="tbl" border="1">

        <thead>

            <tr>

                <th>&nbsp;</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>

</body>

</html> 




반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

85장 JQuerySample 짝수행과 홀수행의 배경색 변경 (TablePlugIn.htm)  (0) 2009.11.25
84장 JQuerySample 예시 테이블 (TableEvenOdd.htm)  (0) 2009.11.25
82장 JQuerySample 체크 박스 선택/해제 (CheckBoxAllCheck.htm)  (0) 2009.11.25
81장 JQueryPlugIn 사진 상세 보기 (RedPlusPhotoView.htm)  (0) 2009.11.25
80장 JQueryPlugIn 새로운 함수 생성 (Replace.htm)  (0) 2009.11.25
posted by Magic_kit

티스토리툴바