HTMLテーブルにソート機能を実装し並べ替え可能に！JavaScriptで実装！

<table id="data-table">
	<thead>
		<tr>
			<th onclick="sortTable(0)">
				種類
				<span class="sort-arrow"></span>
			</th>
			<th onclick="sortTable(1)">
				年齢
				<span class="sort-arrow"></span>
			</th>
			<th onclick="sortTable(2)">
				名前
				<span class="sort-arrow"></span>
			</th>
		</tr>
	</thead>
	<tr>
		<td>ライオン</td>
		<td>30</td>
		<td>エンジニア</td>
	</tr>
	<tr>
		<td>トラ</td>
		<td>34</td>
		<td>デザイナー</td>
	</tr>
	<tr>
		<td>ゾウ</td>
		<td>28</td>
		<td>マーケター</td>
	</tr>
	<tr>
		<td>カバ</td>
		<td>32</td>
		<td>医師</td>
	</tr>
	<tr>
		<td>ヒョウ</td>
		<td>29</td>
		<td>教授</td>
	</tr>
	<tr>
		<td>チーター</td>
		<td>27</td>
		<td>プログラマー</td>
	</tr>
	<tr>
		<td>キリン</td>
		<td>31</td>
		<td>アーティスト</td>
	</tr>
	<tr>
		<td>ゴリラ</td>
		<td>35</td>
		<td>建築家</td>
	</tr>
	<tr>
		<td>ペンギン</td>
		<td>26</td>
		<td>料理人</td>
	</tr>
	<tr>
		<td>カンガルー</td>
		<td>33</td>
		<td>作家</td>
	</tr>
	<tr>
		<td>ワニ</td>
		<td>30</td>
		<td>舞台演出家</td>
	</tr>
	<tr>
		<td>ハリネズミ</td>
		<td>28</td>
		<td>歌手</td>
	</tr>
	<tr>
		<td>カメレオン</td>
		<td>29</td>
		<td>映画監督</td>
	</tr>
	<tr>
		<td>オウム</td>
		<td>36</td>
		<td>宇宙飛行士</td>
	</tr>
	<tr>
		<td>ゴルフィンチ</td>
		<td>25</td>
		<td>料理研究家</td>
	</tr>
	<tr>
		<td>ハマスター</td>
		<td>30</td>
		<td>ファッションデザイナー</td>
	</tr>
	<tr>
		<td>クジャク</td>
		<td>28</td>
		<td>舞踏家</td>
	</tr>
	<tr>
		<td>アルパカ</td>
		<td>32</td>
		<td>農家</td>
	</tr>
	<tr>
		<td>フラミンゴ</td>
		<td>31</td>
		<td>テレビプロデューサー</td>
	</tr>
	<tr>
		<td>カラス</td>
		<td>29</td>
		<td>声優</td>
	</tr>
	<tr>
		<td>オランウータン</td>
		<td>34</td>
		<td>政治家</td>
	</tr>
	<tr>
		<td>クマ</td>
		<td>27</td>
		<td>消防士</td>
	</tr>
	<tr>
		<td>ヤギ</td>
		<td>30</td>
		<td>ソフトウェアエンジニア</td>
	</tr>
	<tr>
		<td>アヒル</td>
		<td>33</td>
		<td>映画スタントマン</td>
	</tr>
	<tr>
		<td>パンサー</td>
		<td>26</td>
		<td>ミュージシャン</td>
	</tr>
	<tr>
		<td>コアラ</td>
		<td>30</td>
		<td>料理評論家</td>
	</tr>
	<tr>
		<td>ホッキョクギツネ</td>
		<td>28</td>
		<td>冒険家</td>
	</tr>
	<tr>
		<td>アシカ</td>
		<td>35</td>
		<td>獣医</td>
	</tr>
	<tr>
		<td>オオカミ</td>
		<td>29</td>
		<td>テクニカルライター</td>
	</tr>
	<tr>
		<td>キツネ</td>
		<td>32</td>
		<td>映画プロデューサー</td>
	</tr>
</table>

table {
    width: 100%;
    border-collapse: collapse;
}
#data-table th, #data-table td {
    border: 1px solid #ddd;
    padding: 12px 15px;
    text-align: left;
}

#data-table th {
    position: relative;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    user-select: none;
}

#data-table th:hover {
    background-color: #0056b3;
}

#data-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.sort-arrow {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 0;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
.sort-arrow::before,
.sort-arrow::after {
    content: "";
    display: inline-block;    
}
.sort-arrow::before {
    border-bottom: 5px solid currentColor;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    transform: translate(-50%,-65%);
}
.sort-arrow::after {
    border-top: 5px solid currentColor;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    transform: translate(-50%,-35%);
}
.asc .sort-arrow::after,
.desc .sort-arrow::before {
    content: none;
}
@media screen and (max-width: 767px) {
    .sort-arrow {
        right: 10px;
    }
}

let sortOrder = 1;

function sortTable(columnIndex) {
    const table = document.getElementById("data-table");
    let switching = true;
    let currentDirection = (sortOrder === 1) ? "asc" : "desc";
    let i;

    let ths = table.getElementsByTagName("TH");
    for (i = 0; i < ths.length; i++) {
        ths[i].classList.remove("asc", "desc");
        if (i === columnIndex) {
            ths[i].classList.add(currentDirection);
        }
    }

    while (switching) {
        switching = false;
        let shouldSwitch = false;
        let rows = table.rows;

        for (i = 1; i < (rows.length - 1); i++) {
            let x = rows[i].getElementsByTagName("TD")[columnIndex];
            let y = rows[i + 1].getElementsByTagName("TD")[columnIndex];

            if ((sortOrder === 1 && x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) ||
                (sortOrder === -1 && x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase())) {
                shouldSwitch = true;
                break;
            }
        }

        if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
        }
    }

    sortOrder = -sortOrder;
}