JS Eclipse JavaScript 활용 : 화면에 출력된 데이터 정렬하기

 

 

화면에 출력된 데이터 정렬

 

 

<style type="text/css">

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

table {
margin: 20px;
}

th, td {
padding: 10px;
}

</style>

 

//

<h1>화면에 출력된 데이터 정렬하기</h1>
<hr>

<table id="table">
<thead>
<tr><th>숫자</th></tr>
</thead>
<tbody id="tbody">
<tr><td>22</td></tr>
<tr><td>7</td></tr>
<tr><td>4</td></tr>
<tr><td>8</td></tr>
<tr><td>6</td></tr>
<tr><td>3</td></tr>
</tbody>
</table>

<div class="">
<button id="asc">오름차순 정렬</button>
<button id="desc">내림차순 정렬</button>
</div>

<script type="text/javascript">

// 1. 자바스크립트의 배열

 

const arr1 = [22, 7, 4, 8, 6, 3];

console.log(arr1);

// .sort((함수)); // 기본적으로 데이터들을 오름차순 정렬한다. 반환값은 1 or -1

arr1.sort((a,b) => {
return (a>b) ? 1 : -1; // 오름차순
// return (a>b) ? -1 : 1; // 내림차순
});

console.log(arr1);


// 2. 객체배열의 정렬(객체의 특정 멤버 변수를 기준으로 정렬한다.)

 

const arr2 = [
{'name' : '홍승현', 'age' : 20},
{'name' : '신은한', 'age' : 25},
{'name' : '이광호', 'age' : 32},
{'name' : '전범수', 'age' : 19},
{'name' : '이민수', 'age' : 35}
];

arr2.sort((a,b) => {
return a.age > b.age ? 1 : -1;
});

console.log(arr2);


// 3. HTML 요소 정렬
const trArr = Array.from(document.querySelectorAll("tbody > tr"));

trArr.sort((trA, trB) => {
const a = +trA.firstChild.innerText;
const b = +trB.firstChild.innerText;
// const a = trA.children[0].innerText;
// 자식요소가 하나만 있으면 firstChild

return (a > b) ? 1 : -1;
});

const tbody = document.getElementById("tbody");

tbody.innerHTML = "";

trArr.forEach(tr => tbody.appendChild(tr));

 

---

 

Exercise 1

 

 

<script>

     const tbody = document.getElementById("tbody");
     const trArr = Array.from(document.querySelectorAll("tbody > tr"));
     const ascBtn = document.getElementById("asc");
     const descBtn = document.getElementById("desc");
    
     const clickHandler = (event) => {
     trArr.sort((trA,trB) => {
         const a = +trA.firstChild.innerText;
         const b = +trB.firstChild.innerText;

         const flag = (event.target.id == 'asc') ? (a > b) : (a < b);
        
         return flag ? 1 : -1;
         });
    
     tbody.innerHTML = "";
        
         trArr.forEach(tr => tbody.appendChild(tr));
     }
    
     ascBtn.onclick = clickHandler;
     descBtn.onclick = clickHandler;

</script>