<table id="table_id">
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>X</td>
            <td>Y</td>
            <td>4</td>
        </tr>
        <tr>
            <td>I</td>
            <td>J</td>
            <td>10</td>
        </tr>
        <tr>
            <td>I</td>
            <td>J</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

<script>    
    let sortTable = function(id, n, dir) {
        n--;
        var table, rows, switching, i, x, y, shouldSwitch, switchcount = 0;
        table = document.getElementById(id);
        switching = true;

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

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

                if (dir == "asc") {
                    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                        shouldSwitch = true;
                        break;
                    }
                } else if (dir == "desc") {
                    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                        shouldSwitch = true;
                        break;
                    }
                }
            }
            if (shouldSwitch) {
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true;
                switchcount ++;
            } else {
                if (switchcount == 0 && dir == "asc") {
                    dir = "desc";
                    switching = true;
                }
            }
        }
    }

    sortTable("table_id", 3, "desc");
</script>