使用 Javascript 对具有相同功能的多个表进行排序

Question

我正在尝试使用 Javascript 中的相同函数对多个表进行排序。这些表格都是相似的，我只是希望它能够在您单击表格标题时按字母顺序或数字顺序（从高到低）排序，当您再次单击标题时，它会排序反向排列（例如从最低到最高）。

我使用了 W3 Schools 的这个代码：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table_desc

它适用于仅对一张表进行排序。但是，当我将“GetElementById”更改为“GetElementsByClassName”时它不起作用。

以下是我修改后的 HTML 代码：忽略 NFL 内容，因为它只是我用来测试表格内容的数据）

<table border="1" class="supTable">
            <tr>
                <th onclick="sortTable(0)"> Team Name</th>
                <th onclick="sortTable(1)">Super Bowls</th>
            </tr>
            <tr>
                <td>Atlanta Falcons</td>
                <td>0</td>
            </tr>
            <tr>
                <td>Dallas Cowboys</td>
                <td>4</td>
            </tr>
            <tr>
                <td>Houston Texans</td>
                <td>0</td>
            </tr>
            <tr>
                <td>Green Bay Packers</td>
                <td>3</td>
            </tr>
            <tr>
                <td>New England Patriots</td>
                <td>5</td>
            </tr>
            <tr>
                <td>Oakland Raiders</td>
                <td>2</td>
            </tr>
            <tr>
                <td>New York Giants</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Miami Dolphins</td>
                <td>1</td>
            </tr>
        </table>
    </div>
    <div id="supAfc">
        <table border="1" class="supTable">
            <tr> 
                <th onclick="sortTable(0)"> Team Name</th>
                <th onclick="sortTable(1)">Super Bowls</th>
            </tr>
            <tr>
                <td>Houston Texans</td>
                <td>0</td>
            </tr>
            <tr>
                <td>New England Patriots</td>
                <td>5</td>
            </tr>
            <tr>
                <td>Oakland Raiders</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Miami Dolphins</td>
                <td>1</td>
            </tr>
        </table>
    </div>
    <div id="supNfc">
        <table border="1" class="supTable">
            <tr>
                <th onclick="sortTable(0)"> Team Name</th>
                <th onclick="sortTable(1)">Super Bowls</th>
            </tr>
            <tr>
                <td>Atlanta Falcons</td>
                <td>0</td>
            </tr>
            <tr>
                <td>Dallas Cowboys</td>
                <td>4</td>
            </tr>
            <tr>
                <td>Green Bay Packers</td>
                <td>3</td>
            </tr>
            <tr>
                <td>New York Giants</td>
                <td>2</td>
            </tr>
        </table>
    </div>

这是 Javascript 代码：

function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;

table = document.getElementsByClassName("supTable");
switching = true;
dir = "asc"; 
while (switching) {
    switching = false;
    rows = table.getElementsByTagName("TR");
    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;
        }
    }
}
}

我想我知道为什么类选择器不起作用，如果它能让我得到结果，我很乐意尝试不同的功能。 有人可以帮我使用 Javascript，最好不要使用 jQuery，因为我目前不熟悉 jQuery。

我只是希望能够在多个表上使用相同的功能，因此我不必多次复制和粘贴相同的代码并每次都更改 Id 选择器。

编辑 - 有几个人提到了一个关于查询选择器的不同问题。我将如何使用查询或类选择器来正确调用/解决我的问题？

Answer 1

我还没有测试过。试试看它是否有效：

 <table border="1" class="supTable1">
        <tr>
            <th onclick="sortTable('supTable1', 0)"> Team Name</th>
            <th onclick="sortTable('supTable1', 1)">Super Bowls</th>
[...]
 <div id="supAfc">
    <table border="1" class="supTable2">
        <tr> 
            <th onclick="sortTable('supTable2', 0)"> Team Name</th>
            <th onclick="sortTable('supTable2', 1)">Super Bowls</th>
        </tr>

并将javascript函数更改为：

 function sortTable(tableClass, n) {
     var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;

     table = document.getElementsByClassName(tableClass)[0];
     switching = true;
     dir = "asc";

（我仍然不明白为什么你的帖子一开始就被否决了）