[JavaScript / jQuery] th눌러서 table 정렬하기

 

   <div class="container padding0"> 
		<table class="table table-bordered content-Table" id="inspextionComplete-Table">
		  <thead>
		    <tr>
		      <th scope="col">
		      	입차 시간 
		      	<div class="table-order-button">
			      	<button onclick="sort(this)" class="sortBtn" value="down">▼</button>
				</div>	
		      </th>
		      <th scope="col">
		      	출차 시간	
		      	<div class="table-order-button">
			      	<button onclick="sort(this)" class="sortBtn" value="down">▼</button>
				</div>		      	
		      </th>
		      <th scope="col">
		    	  차량번호
		    	<div class="table-order-button">
			      	<button onclick="sort(this)" class="sortBtn" value="down">▼</button>
				</div>	
		      </th>
		      <th scope="col">
		      	  운전자
		      	<div class="table-order-button">
			      	<button onclick="sort(this)" class="sortBtn" value="down">▼</button>
				</div>			      	  
		      </th>
		      <th scope="col" hidden="hidden">
		      	  휴대전화번호
		      	<div class="table-order-button">
			      	<button onclick="sort(this)" class="sortBtn" value="down">▼</button>
				</div>			      	  
		      </th>
		    </tr>
		  </thead>
		  <tbody id="tbody">
		    <tr>
		      <td>08:00</td>
		      <td class="fontColorRed">미출차</td>
		      <td>11가 1234</td>
		      <td class="clickText">김길동</td>
		      <td hidden="hidden">01000000000</td>
		    </tr>
		    <tr>
		      <td>08:00</td>		    
		      <td>09:00</td>		    
		      <td>경남02가1155</td>
		      <td class="clickText">박길동</td>
		      <td hidden="hidden">01022222222</td>
		    </tr>
		    <tr>
		      <td>08:00</td>		
		      <td class="fontColorRed">미출차</td>	    
		      <td>대전05리2935</td>
		      <td class="clickText">이길동</td>
		      <td hidden="hidden">01099999999</td>
		    </tr>
		  </tbody>
		</table>  
	</div>

 

function sort(e){
    let tableId = $(e).closest('table').attr('id');
    let table = document.getElementById(tableId);
    let thIndex = $(e).closest('th').index();
    let value = $(e).val();
    let rows = Array.from(table.rows).slice(1); // 헤더 제외
    let isAscending = value === "down";
    let sort;

    if (isAscending) {
        $(e).val("up");
        $(e).text("▲");
        sort = 1;
    } else {
        $(e).val("down");
        $(e).text("▼");
        sort = -1;
    }
    rows.sort((a, b) => {
        let aText = a.cells[thIndex].innerText;
        let bText = b.cells[thIndex].innerText;
        return isAscending ? aText.localeCompare(bText) : bText.localeCompare(aText);
    });

    // 기존 행 삭제 후 정렬된 행 추가
    let tbody = table.querySelector('tbody');
    tbody.innerHTML = '';
    rows.forEach(row => tbody.appendChild(row));
}