입력 검색 폼(form) 꾸미기

jQuery/DOM&jQuery 2010.02.22 13:41

간단한 검색 폼

간단한폼을 만들어보고 jQuery를 이용하여 label의 텍스트가 검색폼에 들어가게하여 라인을 줄여볼것이다.


css에서 label을 블럭 엘리먼트로 변경해준다.

label{ display:block;}

그러면 흔히 볼수있는 다음과 같이모습을 볼수있을것이다.

한라인 줄이기

위의 결과물은 label엘리먼트가 한블럭 차지하여 혹시사이트가 작은공간을 요구할때 불편사항을 줄수도있다.따라서 css변화를 주어 겹치게할것이다.

var $search = $('#search').addClass('overlabel');

html에서 클래스를 그냥주지않고 위와같이 jQuery를이용한것은 후에 별도로 같은 구문을 사용할 필요가있기에 변수로 지정해준것이다.그리고 css는 다음과 같다.

.overlabel{ position: relative;}
.overlabel label{ 
position:absolute;
top:1px; left:3px;
cursor:text;}

원하는 결과가 나올것이다.하지만 다음과 같은 문제점이 발생한다.

  • label의 텍스트"입력하시오"와 사용자가 입력할 텍스트가 겹치게된다
  • label이 검색필드위에있기에 브라우저에 따라 마우스만으로 입력필드에 이동할 수 없을 경우도있다.

문제점해결

첫번째 문제를 위해 필드에 포커스가 올 때 감춰줄 필요가 있다

$(document).ready(function() {
  var $search = $('#search').addClass('overlabel');
  var $searchInput = $search.find('input');
  var $searchLabel = $search.find('label');
  $searchInput
  .focus(function() {
  //포커스되면
    $searchLabel.hide();
    //보여준다
  })
  .blur(function() {
    if (this.value == '') {
      $searchLabel.show();
     }  }); });

각 엘리먼트를 변수로 지정해 주었고 input엘리먼트에 텍스트를 입력할 경우 원래 텍스트를 감추고 반대로 떠나면 다시 보여주게 하고있다. 다음에는 레이블을 클릭시 이벤트를 발생할 수 있도록 하는 것이다.

$searchLabel.click(function() {
  $searchInput.trigger('focus');

마무리

거의 다되었지만 하나남은것이있다. 위와같이할 경우 페이지를 새로고침하면 입력하던 텍스트값이 남아있도록할 필요가있다.

if ($searchInput.val()) {
//입력한 값이 남아 있다면
    $searchLabel.hide();
  }

만약반대로 새로고침 할 경우 "입력하세요"가 나오게 하려면 null값을 주면 된다

if ($searchInput.val()) {
    $searchInput.val(null);
  }

이로서 완성. 완성된 페이지를 보려면 여기로 http://sianasiatiger.cafe24.com/study/F_searchform.html

저작자 표시
신고

설정

트랙백

댓글

jquery text() 메소드

jQuery/jQuery메소드 2010.02.20 14:39

jquery text() 메소드

.text() 메소드는 주요기능으로 텍스트값을 반환하는역할을 한다.

alert( $('p').text() );

html은

나를 출력하시오

기본적으로 엘레먼트의 텍스트를 반환하여 출력하게 되어있다.

  1. $('p') : p라는 엘리먼트에 접근한다
  2. .text() : 그엘리번트의 텍스트 값을 찾느다.
  3. alert : 경고창으로 뜨도록

위와 같이 하면은 경고창에'나를 출력하시오' 라고 나올 것이다.이번에는 괄호안에 값을 넣었을 경우를 보자

$('p').text('나를 출력');

html은

나 말고...

값이 대체 되기도 한다. 화면에는 원래나와야되는 '나말고...' 대신 '나를 출력'이 나타날것이다.정확히 말하면 대체 되는 것이 아니라 덮어지는 것이다.

저작자 표시
신고

설정

트랙백

댓글

jquery filter() 메소드

jQuery/jQuery메소드 2010.02.19 10:30

jquery filter() 메소드

filter()
filter()메소드는 영어 해석그대로 필터역할을 한다.선택한것에 접근 할때 그 입력값에 일치하는 엘리먼트를 가르킨다

나 말고

나를 집어주시요~

이 때 다음과 같이 사용하면

$('p').filter('#test').text();

나를집어주시오를 선택하게 된다. 순서는 다음과 같다.

  1. $('p') : p라는 엘리먼트에 접근
  2. .filter('#test') : 그중 test라는 아이디를 가진것을 선택
  3. .text() : 그리고 텍스트를 반환
저작자 표시
신고

설정

트랙백

댓글

jquery end() 메소드

jQuery/jQuery메소드 2010.02.18 20:55

jquery end() 메소드

원문은 여기에서 볼 수있다http://api.jquery.com/end/

.end()
end() 메소드는 현재의 엘리먼트 바로 앞의 엘리먼트를 지칭한다. 다음예제를보자

Hm..

this is the test

$(document).ready(function() {
			alert($('p').filter('#test').end().text());
		});

스크립트 소스에서 접근순서를보자

  1. $('p') : p엘리먼트에 접근
  2. .filter('#test') : #test라는 아이디에 접근
  3. .end() : 한차례앞의 것에 접근한다 따라서 p에 접근하게 된다
  4. alert($('p').filter('#test').end().text()); 소스는 p에리먼트안의 텍스트 Hm..this is the test를 출력시킨다.

체이닝(chaining)

end 함수가 유용한 것은 여러번사용하여 어떤 엘리먼트를 재지정 할 필요없다는 점이다. 다음예제를보자

  
$('form ')
    .filter('.required').text( )
     .end().end()
    .filter('.conditional').text();

$('form ')에 대해서 end 함수를 사용하여 접근 하는 방법을 짜는 소스를 줄여주고있다. 위의 것이 의미하는 바는 다음과 같다.

  
$('form ')
    .filter('.required').text( );
$('form ')    
    .filter('.conditional').text();

아래 소스를 보면은 접근하기 위해 $('form ')를 두번이나 사용했다.end를 사용하면 이럴 필요없다. 또 여러번 사용가능하기에 바로 앞의것만 아닌 맨 앞의것도 선택할 수 있는것이다. 따라서 .end().end()$('form ') 를 지칭한다.

이런 end함수의 기능을 체이닝(chaining)이라하며 jQuery의 장점중 하나이다

저작자 표시
신고

설정

트랙백

댓글

jQuery 기능적 폼(form) 만들기

jQuery/DOM&jQuery 2010.02.18 19:59

jQuery 기능적 폼(form) 만들기

jQuery 이용하여 좀더 기능적으로 form을 만들어보자.기본적인 폼의코드는 다음과 같다

더보기

이름을입력할 input엘리먼트는 클래스명을required 그리고 나머지들은 클래스명을 conditional로 주었다.이코드를 다음과 같이 수정할것이다.

  • legend엘리먼트를 다른 엘리먼트로 대체하여 좀더 편리하게 css로 꾸미게 한다
  • 반드시 입력할 이름란에 '*'를 또 다른 입력란에는 '**'를 필수, 선택 대신으로 대체시킨다
  • 필요한 선택입력 항목 박스를 클릭시 텍스트 입력 박스가 보이도록 또 감추도록한다.

엘리먼트 수정

legend엘리먼트는 css로 꾸미기 까다로운 것중하나다. 표준을 지키기위해선 써야하고 꾸미기위해서 바꾸자니 까다롭다. 따라서 스크립트를 이용해서 대체시켜보자

 $('legend').each(function(index) {
 //문서전체에서 legend에 접근하여
  $(this).replaceWith('

' + $(this).text() + '

'); //찾아낸것을 h3엘리먼트로 바꾸어준다. });

위의 소스는 legend엘리먼트를 h3에리먼트로 대체시켜주고 있다. 함수는.replaceWith()를 사용하고있다.each를 사용한것은 여기서는 하나의 폼만 사용해서보여주고있지만 여러개를사용할때 공통으로 검사하고 적용해 주기 때문이다. css로 바탕색은 분홍 글자색은 흰색으로 해보자

h3{ background:#fcc; color:#FFF;}

아스테리크로 대체

.replaceWith()함수로 대체시킬수도있지만 차후의 기능적 사용여부와 또 위에 별도표시를위해 변수로 지정하고 바꾸어줄것이다.

  var requiredFlag = ' * ';
  var conditionalFlag = ' ** ';
  $('form :input')
   .filter('.required')
   .next('span').text(requiredFlag)
   .end().end()
   .filter('.conditional')
   .next('span').text(conditionalFlag);

위의 소스는 먼저 아스테리크를 변수로지정해주고 그 다음바꾸어줄 텍스트를 찾아가고있다.주요시 볼점은 .end()함수이다.end함수는 다시 이전요소에 접근하는 함수이다.따라서 첫번째 end는 .filter('.required')에 접근 두번째end는$('form :input')접근하고있다. 따라서 '**'를 사용할 .conditional란 클래스를가진것에 접근시 처음부터 소스를 $('form :input').filter('.conditional')이런식으로 짜줄필요없이 단축시킬수있다.

이번에는 (필수), (선택)이란 텍스트에서 괄호를 때어주고 변수로 지정하고 아스테리크와 같이이어주도록 지정해준다.바라는 결과는 다음과 같다

필수*

선택**

이를위해 소스를보자

  var requiredKey = $('input.required:first')
                        .next('span').text();
  var conditionalKey = $('input.conditional:first')
                        .next('span').text();
    requiredKey = requiredFlag + 
             requiredKey.replace(/^\((.+)\)$/,'$1');
  conditionalKey = conditionalFlag + 
            conditionalKey.replace(/\((.+)\)/,'$1');

.replace()의 역할은 괄호를 떼어주는역할을 했다.마지막으로 이것을 맨위에 붙여주자

	$('

') .addClass('field-keys') .append(requiredKey + '
') .append(conditionalKey) .insertBefore('#contact');

이제까지 이블로그의 포스팅을 봐왔다면 쉽게 이해가능할것이다. 클래스를 지정한것은 단순히 좀더 꾸며주기위했을 뿐이다.

체크박스 클릭에 따라 보여주기 감추기

마지막으로 체크박스에 따라보여주거나 감추는 기능을 만들어보자.먼저 conditional명의 클래스의 텍스트박스를 모두감추어준다.

$('input.conditional').next('span').andSelf().hide()

다음은 페이지내에서 체크박스를 찾아가도록되어있다

$('input.conditional').next('span').andSelf().hide()
  .end().end()
  .each(function() {
    var $thisInput = $(this);
    var $thisFlag = $thisInput.next('span');
    $thisInput.prev('label').find(':checkbox')
    .attr('checked', false)
    //함수가 체크안된었다는초기값을 설정한것이다.
    .click(function() ;
    //이뒤에 실행되는 함수를 달아주면된다

마지막으로 박스가 체크된에 따라 바뀌는 소스를 만들어주자

  .click(function() {
      if (this.checked) {
      //만약 박스가 체크된다면
        $thisInput.show().addClass('required');
        $thisFlag.show();
        $(this).parent('label').addClass('req-label');
      } else {
      //반대라면
        $thisInput.hide().removeClass('required').blur();
        $thisFlag.hide();
        $(this).parent('label').removeClass('req-label');

아래는 최종 완성된 소스

더보기

완성된 예제를 보려면 여기로http://sianasiatiger.cafe24.com/study/F_moreedite.html

저작자 표시
신고

설정

트랙백

댓글

ajax 테이블 페이징

Ajax 2010.02.17 21:17
ajax 테이블 페이징

jquery를 이용한 ajax 테이블 페이징

테이블에 여러자료가 있고 그것이 아주많다면 한페이지에 다루기 힘들것이다. 따라서 일부분만보여주고 페이지로 나누어 보여주려고 한다.

여전히 네이버 베스트셀러리스트를 참조했다. 소스가기니 접어두었다.아래 참조

더보기

아래와 같은 순서로 해볼것이다.

  • 보여줄 페이지설정
  • 전체 페이지계산
  • 스크립트로 페이지버튼html 소스짜기

보여줄 페이지 설정

한페이지당 우리는 표에서 5개를 봉줄것이다. 따라서 다음과 같이 정한다.

 $('table.paginated').each(function() {
     var currentPage = 0;
     var numPerPage = 5;
     var $table = $(this);
     var repaginate = function() {
       $table.find('tbody tr').hide()
	  //기본적으로 모두 감춘다
         .slice(currentPage * numPerPage,
           (currentPage + 1) * numPerPage)
         .show();
	 //현재페이지+1 곱하기 현재페이지까지 보여준다
     };    

currentPage로 초기값을 0으로주었다.그리고 numPerPage로 기본값을 5로주고 그아래는 계산하고 .slice()메소드를 이용해 필요한 만큼 보여주도록 되어있다.

페이지계산 하기

표가 여러개있고 그중 우리는 5개식 보여주기로 했다. 전체표의 열을 5로나누었을때 소수가 되면 페이지계산이안되니 반올림해서 페이지를 늘이도록하자.

	 
     var numRows = $table.find('tbody tr').length;
	 //length로 전체길이구함
     var numPages = Math.ceil(numRows / numPerPage);
	 //Math.ceil를 이용하여 반올림

위와 같이 한다면 기본소스에서 14열을 사용했으니 반올림하여 14/5 = 3. 따라서 3개의 페이지가 만들어질 것이다.

페이지버튼 html 소스짜기

마지막으로 해 줄 것은 페이지버튼을 만들어주는것이다. 페이지가 늘어남에따라 이버튼역시 늘어나니 스크립트로 만들어줘야한다.

	
     var $pager = $('
'); //pager라는 클래스의 div엘리먼트 작성 for (var page = 0; page < numPages; page++) { $('').text(page + 1) .bind('click', {newPage: page}, function(event) { currentPage = event.data['newPage']; repaginate(); //for구문을 이용하여 페이지 수만큼 //버튼을 구현 $(this).addClass('active') //활성화된페이지에는 active라는 클래스명을 붙여준다. .siblings().removeClass('active'); }).appendTo($pager).addClass('clickable'); } $pager.insertBefore($table) //앞서 설정한 페이지키를 삽입 .find('span.page-number:first').addClass('active'); });

위에서 이벤트가 .click으로 바로 가지않고 .bind로 설정된것은 변수들이 함수밖에 정의되있는것을 참조하기 때문이다. 그냥.click으로 처리한다면 빈페이지가뜰것이다. 이로서 완성되었다.3개의 페이지버튼이나오것이고 한페이지에 5열이 나올 것이다.

다시 둘러보기

이 함수가 정열과 함께 사용되려면 정열이될때마다 페이징이 실행되도록 하면된다.이때 역시 외부에서 참조 하도록 .bind를 쓴다. 최종 코드를보자

	
 $(document).ready(function() {
  $('table.paginated').each(function() {
    var currentPage = 0;
    var numPerPage = 5;
    var $table = $(this);    
 
    $table.bind('repaginate', function() {
     $table.find('tbody tr').hide()
        .slice(currentPage * numPerPage,
          (currentPage + 1) * numPerPage)
        .show();});
        
    var numRows = $table.find('tbody tr').length;
    var numPages = Math.ceil(numRows / numPerPage);
    var $pager = $('
'); for (var page = 0; page < numPages; page++) { $('').text(page + 1) .bind('click', {newPage: page}, function(event) { currentPage = event.data['newPage']; $table.trigger('repaginate'); $(this).addClass('active') .siblings().removeClass('active'); }).appendTo($pager).addClass('clickable');} $pager.insertBefore($table) .find('span.page-number:first').addClass('active');});});

마지막으로 호출하기위해 앞쪽의 정렬키뒤에 $table.trigger('repaginate'); 를 추가 해준다

	
           .
           ..
           ...
	   $table.find('th').removeClass('sorted-asc')
             .removeClass('sorted-desc');
           if (sortDirection == 1) {
             $header.addClass('sorted-asc');
           }
           else {
             $header.addClass('sorted-desc');
           }
           $table.alternateRowColors();

	   $table.trigger('repaginate');     });

예제를 보려면 여기로http://sianasiatiger.cafe24.com/study/T_usePage.html


저작자 표시
신고

설정

트랙백

댓글

jquery를 이용한 ajax 테이블 정렬 순서변경

Ajax 2010.02.17 18:07

jquery를 이용한 ajax 테이블 정렬 순서변경

오름차순과 내림차순 방법으로 모두 정렬하려면 이번엔 다른 키코드를 삽입해야 한다. 이제까지는 오름차순만 사용했지만 이번에 변수를 넣어서 클릭시 차순이 변화되도록 해보자.

 if (a.sortKey < b.sortKey) return -1;
 if (a.sortKey > b.sortKey) return 1;
 return 0;

저번에 보았던 비교 값을 이용한 정렬이다. 만약 숫자가 작다면 -1 값을 반환 크다면 1을 반환 상관없으면 0을 반환하도록 되어있다. 이를이용하여 오름차순으로 정렬되게 했다. 자그럼다음코드를 보자

 if (a.sortKey < b.sortKey) return 1;
 if (a.sortKey > b.sortKey) return -1;
 return 0;

이 경우는 단지 결과값에 1과 -1을 바꾸어 주었을뿐이다.따라서 그결과값도 내림차순으로 나온다,.이번엔 반환하는값을 클릭에 따라다르게 하여 오름차순, 내림차순을 보두 고려해보자

 var sortDirection = 1;
 if ($header.is('.sorted-asc')) {
 sortDirection = -1;
  }

반환하는 값을 위하여 변수를 sortDirection으로 지정해주었다.기본값을 1로 정해주었고 그상태가 반대라면 -1로 주도록되어있다.클래스명을 sorted-asc(오름차순의 경우),sorted-desc(내림차순의 경우)로 주도록 하겠다.

 $table.find('th').removeClass('sorted-asc')
    .removeClass('sorted-desc');
      if (sortDirection == 1) {
       $header.addClass('sorted-asc');
          }
      else {
       $header.addClass('sorted-desc');
        }

마지막으로 적용한 것이다.th엘리먼에서 앞에미리 기본값으로 sorted-asc를 붙인것을 지우고 sorted-desc을 붙인다. 현재값에 따라 오름차순 내림차순으로 바뀌게 된다.

요약

그전과 차이점은 단순 리턴하는 값을 변수하나를주어서 다르게 했을 뿐이다.

  • 먼저 변수이름을 지정한다.sortDirection 이라고 정했다.
  • 반환될 기본값을 결정한다 1
  • 클릭시 변할 클래스명을 정한다.sorted-asc(오름차순의 경우),sorted-desc(내림차순)
  • 현재값이 sorted-asc 이면 sorted-desc으로
  • 반대로 현재값이 sorted-desc 이면 sorted-asc으로 되도록 정한다.

완선된 예제를 보려면 여기로http://sianasiatiger.cafe24.com/study/T_usetableArry.html

저작자 표시
신고

설정

트랙백

댓글

자바스크립트 메모리 누수

Ajax 2010.02.17 18:05

자바스크립트 메모리 누수

C언어들에서는 임시적으로 지정한 포인트라던가 이런것들이 자동 삭제 되지만 자바스크립트에서는 그렇지않다.별도 용도로 지정한 변수가 역할이 끝났지만 그대로 남아있기에 메모리를 여전히 차지하게되고 따라서 후에 많은 함수들이 사용되면 언제 방해될지모르는일이다.이를 메모리 누수(memory leak)라고 말한다

테이블 정렬 수행속도테이블 정렬 수행속도이포스팅의 예제를다시보자

           $.each(rows, function(index, row) {
             row.sortKey = $(row).children('td').eq(column)
             //별도로 sortKey 로 지정해주고 
               .text().toUpperCase();
           });
           rows.sort(function(a, b) {
           //여기서 따로 수행처리하도록
             if (a.sortKey < b.sortKey) return -1;
             if (a.sortKey > b.sortKey) return 1;
             return 0;
           });
           $.each(rows, function(index, row) {
             $table.children('tbody').append(row);
             row.sortKey = null;
             //expendo인 sortKey를 null로 지정
           });

마지막 부분엔 수행처리를 빨리 하기위해 별도로 지정해 주었던 변수 sortKey를 null로 지정해주고있다.이것이 메모리누수를 예방하는 방법중 하나이다.

expendo

앞에서 계속 임시로 만든 변수라고 언급했는데 위에서 본예제와 같이 지정되지않은 원래DOM의 속성이아니라 개발자가 새로추가한 속성을 expendo라한다.이것으로 수행속도가 나아지지만 한편으로 메모리를 그대로 차지하고있기에 문제되는경우도있다.따라서 가급적 마지막에 null로 처리하라고 권유하는것도 그때문이다.

jquery에서 제공하는 함수

위와같이 expendo 값을 null로 처리하는 방법도 있지만. jquery의 함수인 .data(), .removeData()를 사용할 수도있다.

           $.each(rows, function(index, row) {
             $(row).data('sortKey'), $(row).children('td')
             //td엘리먼트에서 data함수로 sortKey값을 읽는다
               .eq(column)
               .text().toUpperCase());});
           rows.sort(function(a, b) {
             if ($(a).data('sortKey') < $(b).data('sortKey') )
             //a엘리먼트에서 data함수로 sortKey값을 읽는다
              return -1;
             if ($(a).data('sortKey') > $(b).data('sortKey') ) 
              return 1;
             return 0;
           });
           $.each(rows, function(index, row) {
           $table.children('tbody').append(row);
           $(row).removeData('sortKey');});
           //removeData로 제거

.data()함수로 읽어들이는역할을 했고 마지막으로 .removeData()로 제거시켰다.굳이 이두함수를 사용하는경우는 IE때문이다 IE는 때로는 이벤트에 제거하려는 변수가 포함되어있을시 제거할수없다 이때 jquery의 data함수를 사용하는것이 안전하다

저작자 표시
신고

설정

트랙백

댓글

jquery를 이용한 ajax 테이블 정렬 수행속도

Ajax 2010.02.17 18:03

jquery를 이용한 ajax 테이블 정렬 수행속도

테이블정렬을 해보았다면 이번에 수행속도를 좀더 올려보자

테이블 정렬 참조포스트jquery를 이용한ajax 테이블 정렬

위의포스팅에서 정렬처리구문은 다음과 같았다.

           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 -1;
             if (keyA > keyB) return 1;
             return 0;
           });
          $.each(rows, function(index, row) {

위와같은경우는 비교할때 key를 일일이 로드해서 비교하기에 시간이 걸린다.미리 계산하는방법을 고안해보자

           $.each(rows, function(index, row) {
             row.sortKey = $(row).children('td').eq(column)
             //별도로 sortKey 로 지정해주고 
               .text().toUpperCase();
           });
           rows.sort(function(a, b) {
           //여기서 따로 수행처리하도록
             if (a.sortKey < b.sortKey) return -1;
             if (a.sortKey > b.sortKey) return 1;
             return 0;
           });
           $.each(rows, function(index, row) {
             $table.children('tbody').append(row);
             row.sortKey = null;
           });

위구문은 key를 찾는구문과 비교구문을 별도로 분리하고있다.따라서 수행속도가 좀더빨라질것이다. 별도로 sortKey라는 변수로 정해주고 그처리구문을 아래에서 해주도록되어있다.

확하려면 여기로..데이타량이 예시로 짧게 했기에 그전의 예제와 큰 속도차이는 못느낄 것이다.테이블에 많은 데이타를넣고 시험해보면 알수있을 것이다.

자바스크립트 메모리 누수

마지막구문을 보면은 row.sortKey = null 에서 null값을 준것을 볼수있는데 이것은 메모리누수 의 원인이될수있기때문이다. 메모리누수에 대해서 자세이 보려면 다음 포스팅을 보자

자바스크립트 메모리누수

저작자 표시
신고

설정

트랙백

댓글

jquery를 이용한ajax 테이블 정렬

Ajax 2010.02.12 12:49

jquery를 이용한ajax 테이블 정렬

여러책을 놔두고 베스트셀러를 주제로 테이블에 정렬시켜보자. 기본적으로 팔려나가는 순위되로 나영시켜놓고 책제목, 순위, 저자, 가격순으로 클릭시 정렬되게 해보자

네이버에 올라와있는 베스트셀러를 참조했다.

다음과같은 이미지를 모델로 할것이다

html은 다음과 같이짜주었다. 너무길기에 아래 내용들은 생략.그리고 테이블 웹표준 코딩에 대해서 저세히 알고싶다면 표준웹코딩게시물을 보도록

긴 소스기에 접어놓았다

더보기

단지 기능상공부하는것이기에 css의 경우는 자세히는 생략하겠다.단 테이블의 열의 짝수,홀수에 따라색을 주려고한다. 방법은 3가지인다.

  • tr마다 클래스를 두가지주어 두색을css에서 지정
  • css3에서 짝수 홀수 선택자를이용하는방법
  • jQuery에서 css3 선택자를이용

css3를 사용하면 좋겠지만 여전히 바로 css3가적용안되는병맛같은 IE6때문에 3번째방법을 이용하겠다.짝수 홀수 선택자를 이용하고.addClass()함수로 각기 클래스를 달아주었다.

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

클릭시 이벤트작동하게하기

$('table.sortable th.sorting').click()

이제까지 배워온대로라면 위와같이작동하게 되도 문제없다.하지만 그러면 후에 다시소스를짜거나 편집하게될경우 스크립트소스를다띁어고쳐야하는문제가있다.따라서 좁 복잡하지만 변수를주고 클래스가 있는지 .each()함수로 검사하고 그에따라 작동하도록할것이다.

$('table.sortable').each(function() {
    //sortable클래스를가진 에서
     var $table = $(this);
     $('th', $table).each(function(column) {
     //또그중 th엘리먼트에서 변수지정
       var $header = $(this);
       if ($header.is('.sorting')) {
	   //header에서 sorting이란 클래스가있다면
         $header.addClass('clickable').hover(function() {
        //clickable이라는 클래스를 단다 그리고 호버하면
           $header.addClass('hover');
	  //hover이라는 클래스를 달아준다.
         }, function() {
           $header.removeClass('hover');
		   //호버가 안되면 다시 hover이라는 클래스 삭제
         }).click(function() 

위에서보면 this로 스스로 변수를 정해주고 작동되도록 되어있다.마지막으로 hover 그리고 clickable이란 클래스를 달아주었고 css로 약간꾸밈을주자

.clickable {cursor: pointer;}
.hover {text-decoration: underline;}

정렬하기

이제 클릭시 책제목, 순위, 저자, 가격순으로 클릭시 정렬되는 함수를 만들어보자. 정렬할때는 자바스크립스함수.sort()를 사용한다

.sort()

여러 숫자를 놔두고 변수를 지정하고 sort를 간단하게사용해보자

var rows = [ 1, 3, 57, 21, 10, 100];
rows.sort();

위와같이 하면 정렬은 되지만 알파벳 순으로 정렬되어버린다 따라서 [ 1, 10, 100, 21, 3, 51] 이란 결과가 나타날것이다. 문자에서는 크기순서로 이루어져야지 a, b, c, 가나다 순으로 될것이다. 따라서 리스트중 두가지를 비교하는 방법으로 사용할것이다.

rows.sort(function(a, b) {
//정렬된 두가지원소가있다면
if ( a < b ) return -1;
//그중작다면 -1 반환:따라서 뒤로밀린다
if ( a > b ) return  1;
//크다면 1 반환: 따라서 앞으로
retuen 0;
//같거나 어느것이 먼저와도될경우 0 :그자리유지
}

이를 이용하여 완성된 함수는

var rows = $table.find('tbody > tr').get();
     //테이블바디에서 tr을 찾아 row로 지정
     rows.sort(function(a, b) {
      //td엘리먼트에서 텍스트의 인자비교
       var keyA = $(a).children('td').eq(column).text()
       var keyB = $(b).children('td').eq(column).text()
       if (keyA < keyB) return -1;
       if (keyA > keyB) return 1;
       return 0;
     });
     $.each(rows, function(index, row) {
     //각각 정리된 배열을 다시테이블에삽입.		 
     $table.children('tbody').append(row);

마지막에는 다시테이블에 삽이하여 정영되도록하였다. 그럼이제까지본 소스를 종합해보면

 $(document).ready(function() {
   $('table.sortable tbody tr:odd').addClass('odd');
   $('table.sortable tbody tr:even').addClass('even');
   $('table.sortable').each(function() {
     var $table = $(this);
     $('th', $table).each(function(column) {
       var $header = $(this);
       if ($header.is('.sorting')) {
		   //header에서 sorting이란 클래스가있다면
         $header.addClass('clickable').hover(function() {
		//clickable이라는 클래스를 단다 그리고 호버하면
           $header.addClass('hover');
		   //hover이라는 클래스를 달아준다.
         }, function() {
           $header.removeClass('hover');
		   //호버가 안되면 다시 hover이라는 클래스 삭제
         }).click(function() {
			 //자 그리고 클릭시
           var rows = $table.find('tbody > tr').get();
		   //테이블바디에서 tr을 찾아 row로 지정
           rows.sort(function(a, b) {
			 //알파벳순이아닌 값의크기순으로 정렬 하기 인자비교
             var keyA = $(a).children('td').eq(column).text()
              var keyB = $(b).children('td').eq(column).text()
            if (keyA < keyB) return -1;
             if (keyA > keyB) return 1;
             return 0;
           });
           $.each(rows, function(index, row) {
			 //각각 정리된 배열을 다시테이블에삽입.					 
             $table.children('tbody').append(row);
           }); }); }});  }); });

최종정리

위와같이하면 작동되는것을 확인할수있다 하지만 문제는 작동된 후 결과를 보면 색의 정열이 원래 정해진대로 유지되어클릭시 바뀐정열에서도 그대로 적용된다는 점이 문제이다.

여기서 확인해보자http://sianasiatiger.cafe24.com/study/T_usetable_colorER.html

따라서 정렬될떄마다 새롭게 적용되도록 함수를만들어 줘야한다. 이름을 reSortColors로 해주고 다음과 같이 해주었다

  $(document).ready(function() {
   var reSortColors = function($table) {
   //그냥지정했던 짝,홀에따른 클래스부여를
   //함수로 만들어놓았다.
     $('tbody tr:odd', $table)
       .removeClass('even').addClass('odd');
     $('tbody tr:even', $table)
       .removeClass('odd').addClass('even');
   };
   
   $('table.sortable').each(function() {
     var $table = $(this);
     reSortColors($table);
	 //여기서먼저적용
     $('th', $table).each(function(column) {
       var $header = $(this);
       if ($header.is('.sorting')) {
         $header.addClass('clickable').hover(function() {
           $header.addClass('hover');
         }, function() {
           $header.removeClass('hover');
         }).click(function() {
           var rows = $table.find('tbody > tr').get();
           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 -1;
             if (keyA > keyB) return 1;
             return 0;
           });
           $.each(rows, function(index, row) {
             $table.children('tbody').append(row);
           });	   
           reSortColors($table);
           //또 완료되었을따 다시 적용
            });} });});});

이로서 원했던 결과는완성되었다

확하려면 여기로..http://sianasiatiger.cafe24.com/study/T_usetable.html

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바