如何在列标题中显示排序箭头

Question

我知道我是一个全新的人。所以我正在建立一个工作网站。我被起草了，因为其他人的知识甚至更少。我创建了一个巨大的表，并帮助创建一个基本脚本，允许我对表进行排序。

现在我有了一个新问题。如何根据列表的排序，在上下之间放置排序箭头？我可以毫无问题地放置静态箭头，但我不确定状态依赖的箭头。

如果有一个答案只使用理想的HTML / CSS，但如果我必须使用JS，我可以管理。

万分感谢！

这是我目前的JS：

    $(document).ready(function () {
    //grab all header rows
    $('th').each(function (column) {
        $(this).addClass('sortable').click(function () {
                var findSortKey = function ($cell) {
                    return $cell.find('.sort-key').text().toUpperCase()+ ' ' + $cell.text().toUpperCase();

                };
                var sortDirection = $(this).is('.sorted-asc') ? -1 : 1;
                var $rows = $(this).parent().parent().parent().find('tbody tr').get();
                var bob = 0;
                //loop through all the rows and find
                $.each($rows, function (index, row) {
                    row.sortKey = findSortKey($(row).children('td').eq(column));
                });

                //compare and sort the rows alphabetically or numerically
                $rows.sort(function (a, b) {                       
                    if (a.sortKey.indexOf('-') == -1 && (!isNaN(a.sortKey) && !isNaN(a.sortKey))) {
                         //Rough Numeracy check                          

                            if (parseInt(a.sortKey) < parseInt(b.sortKey)) {
                                return -sortDirection;
                            }
                            if (parseInt(a.sortKey) > parseInt(b.sortKey)) {                                
                                return sortDirection;
                            }

                    } else {
                        if (a.sortKey < b.sortKey) {
                            return -sortDirection;
                        }
                        if (a.sortKey > b.sortKey) {
                            return sortDirection;
                        }
                    }
                    return 0;
                });

                //add the rows in the correct order to the bottom of the table
                $.each($rows, function (index, row) {
                    $('tbody').append(row);
                    row.sortKey = null;
                });

                //identify the column sort order
                $('th').removeClass('sorted-asc sorted-desc');
                var $sortHead = $('th').filter(':nth-child(' + (column + 1) + ')');
                sortDirection == 1 ? $sortHead.addClass('sorted-asc') : $sortHead.addClass('sorted-desc');

                //identify the column to be sorted by
                $('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted');
            });
        });
    });

表内容的一些内容：

    <table id="mtable">
                                      <thead>
                                        <tr>
                                            <th onclick="sortTable(1)">Measure</th>
                                            <th onclick="sortTable(2)">Acronym</th>
                                            <th onclick="sortTable(3)">Domain</th>
                                            <th onclick="sortTable(4)">Ages</th>
                                            <th onclick="sortTable(5)">Administration</th>
                                        </tr>
                                      </thead>
                                      <tbody>
                                        <tr>
                                            <td><a href="7u7d.html">7 Up/7 Down Inventory</a></td>
                                            <td>7U7D</td>
                                            <td>Mania</td>
                                            <td>Child</td>
                                            <td>Self</td>
                                        </tr>                                       
                                        <tr>
                                            <td><a href="abc-c.html">Aberrant Behavior Checklist - Community</a></td>
                                            <td>ABC-C</td>
                                            <td>Autism</td>
                                            <td>All</td>
                                            <td>Informant/Clinician</td>
                                        </tr>
                                        <tr>
                                            <td><a href="aims.html">Abnormal Involuntary Movement Scale</a></td>
                                            <td>AIMS</td>                                   
                                            <td>Side Effects</td>
                                            <td>Unspecified</td>
                                            <td>Clinician</td>
                                        </tr>

最后是CSS：

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

th  {
    font-weight: bold;
}

    table {
        width: 100%;
    }  
        table tbody tr {
            border-top: solid 1px #D2D7DC;
        }

            table tbody tr:nth-child(2n+1) {
                background: #f9fbfe;
            }

        table td {
            padding: 0.5em 1em 0.5em 1em;
        }

        table th {
            text-align: left;
            font-weight: 400;
            padding: 0.5em 1em 0.5em 1em;
        }

        table tfoot {
            border-top: solid 1px #D2D7DC;
        }