HTML, Javascript - 배열 객체데이터를 출력 후 정렬하기(sort() 메소드 활용하기)

배열에 객체를 담아 출력 후 최상단 테이블의 헤더를 클릭하면 해당하는 값으로 오름차순, 내림차순 정렬이 되는

간단한 엑셀형태의 데이터 출력을 해보자.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>성적표</title>
  </head>
  <style media="screen">
    * {
      margin: 0;
      padding: 0;
    }
    body{
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .report tr{
      background: #F4FFF0;
    }
    .report td{
      border: none;
      height: 50px;
      font-size: 16pt;
      text-align: center;
    }
    .report td.name{
      width: 170px;
    }
    .report td.class{
      width: 80px;
    }
    .report td.jum{
      width: 130px;
    }
    .titleTable td{
      cursor: pointer;
    }
    .titleTable tr td{
      font-size: 18pt;
      font-weight: bold;
      background: #00B700;
      color: #fff;
    }
    .total td, .avg td{
      color: #fff;
      background: #1DDB16;
    }
  </style>
  <script type="text/javascript" src="js-grade.js"></script>
  <script type="text/javascript" src="jquery.min.js"></script>
  <body>
    <table id="grade" class="titleTable report">
      <tr>
        <td id="name" class="name title">이름</td>
        <td id="class" class="class title">반</td>
        <td id="kor" class="jum title">국어</td>
        <td id="math" class="jum title">수학</td>
        <td id="eng" class="jum title">영어</td>
        <td id="sci" class="jum title">과학</td>
      </tr>
    </table>
    <table id="data" class="report data">

    </table>
    <table id="result" class="report result">

    </table>
  </body>
</html>

js-grade.js

var orderBy = "asc";
window.onload = function(){
  init();
}

function init(){
  var students = [
    {name : "이민우",  class : 2, kor : 79, math : 66, eng : 100, sci : 82},
    {name : "박영철",  class : 2, kor : 94, math : 87, eng : 80, sci : 91},
    {name : "박소미",  class : 3, kor : 66, math : 95, eng : 78, sci : 87},
    {name : "김철수", class : 3, kor : 100, math : 78, eng : 92, sci : 80},
    {name : "송소희",  class : 1, kor : 80, math : 50, eng : 92, sci : 95},
    {name : "이창민",  class : 3, kor : 85, math : 49, eng : 95, sci : 78},
    {name : "김민수", class : 1, kor : 55, math : 98, eng : 86, sci : 77},
    {name : "노홍철", class : 1, kor : 95, math : 88, eng : 48, sci : 95},
    {name : "최유린",  class : 3, kor : 87, math : 77, eng : 91, sci : 89},
    {name : "최희",  class : 2, kor : 69, math : 86, eng : 66, sci : 100},
    {name : "박유진",  class : 2, kor : 70, math : 100, eng : 88, sci : 100}
  ];

  tagParsing(students, true);

  //click Evt
  $(".title").click(function(){
    var titleName = this.id;
    if(titleName == "name"){
      objSort(students, "name");
      tagParsing(students, false);
    }else if(titleName == "class"){
      objSort(students, "class");
      tagParsing(students, false);
    }else if(titleName == "kor"){
      objSort(students, "kor");
      tagParsing(students, false);
    }else if(titleName == "math"){
      objSort(students, "math");
      tagParsing(students, false);
    }else if(titleName == "eng"){
      objSort(students, "eng");
      tagParsing(students, false);
    }else if(titleName == "sci"){
      objSort(students, "sci");
      tagParsing(students, false);
    }
  })
}

function objSort(obj, sort){
  if(orderBy == "asc"){ //오름차순 정렬
    orderBy = "desc";
    obj.sort(function(a, b){
      if (a[sort] > b[sort]) return 1;
      else if (a[sort] < b[sort]) return -1;
    });
  }else{ //내림차순 정렬
    orderBy = "asc";
    obj.sort(function(a, b){
      if (a[sort] > b[sort]) return -1;
      else if (a[sort] < b[sort]) return 1;
    });
  }
}
function tagParsing(obj, init){
  var kTotal = 0;
  var mTotal = 0;
  var eTotal = 0;
  var sTotal = 0;
  var len = obj.length;
  var tag = '';
  for(i=0; i<obj.length; i++){
    tag += "<tr><td class='name'>"+obj[i].name+"</td>"
    +"<td class='class'>"+obj[i].class+"</td>"
    +"<td class='jum'>"+obj[i].kor+"</td>"
    +"<td class='jum'>"+obj[i].math+"</td>"
    +"<td class='jum'>"+obj[i].eng+"</td>"
    +"<td class='jum'>"+obj[i].sci+"</td></tr>";

    kTotal += obj[i].kor;
    mTotal += obj[i].math;
    eTotal += obj[i].eng;
    sTotal += obj[i].sci;
  }
  document.getElementById("data").innerHTML = tag;

  if(init){
    tag = '';
    //총점
    tag += "<tr class='total'><td class='name'>"+"총 점"+"</td>"
          +"<td class='class'>"+"-"+"</td>"
          +"<td class='jum'>"+kTotal+"</td>"
          +"<td class='jum'>"+mTotal+"</td>"
          +"<td class='jum'>"+eTotal+"</td>"
          +"<td class='jum'>"+sTotal+"</td></tr>";
    //평균
    tag += "<tr class='avg'><td class='name'>"+"평 균"+"</td>"
          +"<td class='class'>"+"-"+"</td>"
          +"<td class='jum'>"+(kTotal/len).toFixed(2)+"</td>"
          +"<td class='jum'>"+(mTotal/len).toFixed(2)+"</td>"
          +"<td class='jum'>"+(eTotal/len).toFixed(2)+"</td>"
          +"<td class='jum'>"+(sTotal/len).toFixed(2)+"</td></tr>";

    document.getElementById("result").innerHTML = tag;
  }
}

최초 출력시엔 아무런 정렬없이 배열을 출력하고 이름을 클릭하면 이름별 정렬이 된다.

다시 한번 클릭하면 내림차순 정렬

sort() 메소드에 대하여 간단하게 정리한 링크

https://myhappyman.tistory.com/23

java jdbc등을 활용하여 디비에서 데이터를 가져와 출력 할 경우 sort() 메소드를 사용하지 않겠지만,(db에서 이미 orderBy를 처리하여 가져옴)

Redis 또는 Socket 통신등으로 JSON형태나 다른형태의 데이터를 받게 되면 정렬이 보장되지 않게 수신되는 경우가 많다.

이런 경우를 대비하여 javascript sort() 메소드를 활용하여 간단하게 작성하였다.

저작자표시 비영리 변경금지

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

Javascript - Free SVG 한국맵 제어 처리 (4)	2019.10.16
Javascript - 문자열 변경하기(replace, replaceAll) (0)	2019.10.02
Javascript - sort() / 정렬 메소드 사용하기 (0)	2019.09.08
Javascript - for in 반복문을 사용하여 출력하기 (0)	2019.09.08
Javascript - 스톱워치(stopwatch) 만들기 (0)	2019.09.08

개발 흔적 남기기

HTML, Javascript - 배열 객체데이터를 출력 후 정렬하기(sort() 메소드 활용하기)

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

티스토리툴바