본문 바로가기

Javascript/Jquery

jquery 테이블 정렬 코드

반응형
<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
    table{
        text-align: center;
    }
    th{
        cursor: pointer;  /* 하이퍼 링크 효과*/
    }
</style>
<script>
$(document).ready(function() {
   $('th').each(function (column) {
      $(this).click(function() {
              if($(this).is('.asc')) {
                  $(this).removeClass('asc');
                  $(this).addClass('desc');
                  sortdir=-1;                
              } else {
                 $(this).addClass('asc');
                 $(this).removeClass('desc'); 
                 sortdir=1;
              }
              $(this).siblings().removeClass('asc');
              $(this).siblings().removeClass('desc');
             var rec = $('table').find('tbody>tr').get();
             rec.sort(function (a, b) {
                  var val1 = $(a).children('td').eq(column).text().toUpperCase();
                  var val2 = $(b).children('td').eq(column).text().toUpperCase();
                  return (val1 < val2)?-sortdir:(val1>val2)?sortdir:0;
             });
             $.each(rec, function(index, row) {
                  $('tbody').append(row);
               });
         });
     });
});
</script>
</head>

<body>
    <table border="2px">
        <colgroup>
            <col style="width:7%">
            <col style="width:10%">
            <col style="width:10%">
            <col style="width:10%">
            <col style="width:10%">
        </colgroup>
        <thead>
        <tr>
            <th>과목</th>
            <th>홍길동</th>
            <th>임꺽정</th>
            <th>이몽룡</th>
            <th>성춘향</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>수학</td>
         <td>80</td>
            <td>70</td>
            <td>50</td>
            <td>60</td>
        </tr>
        <tr>
             <td>과학</td>
             <td>50</td>
             <td>30</td>
             <td>60</td>
             <td>90</td>
        </tr>
        <tr>    
            <td>영어</td>
            <td>70</td>
            <td>60</td>
            <td>50</td>
            <td>90</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

결과화면

홍길동을 오름차순 한 결과

홍길동을 내림차순 한 결과

※꼭 <thead>와 <tbody>로 구분을 지어줘야 오름차순 내림차순이 가능하다

과목, 각각 이름 별로 다 내림, 오름차순이 가능하다.

반응형

'Javascript > Jquery' 카테고리의 다른 글

마우스 오버시 이미지 확대  (0) 2020.08.04
table option selected(테이블 option 선택)  (0) 2020.07.18
jquery 테이블 정렬 코드  (0) 2020.07.08
Jquery 선택자  (0) 2020.05.21