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

我试图在Javascript中使用相同的函数对多个表进行排序。所有的表格都是相似的，我只是希望它能起到这样的作用：当你点击表格标题时，它会按字母顺序或数字顺序（从高到低）排序，当你再次点击标题时，它会按相反的方向（例如从低到高）排序该行

我使用了W3学校的代码：

它只对一张表进行排序，效果很好。但是，当我将“GetElementById”更改为“GetElementsByCassName”时，它不起作用

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

队名
超级碗
亚特兰大猎鹰队
0
达拉斯牛仔队
4.
休斯顿德州人队
0
绿湾包装机
3.
新英格兰爱国者
5.
奥克兰突袭者队
2.
纽约巨人队
2.
迈阿密海豚
1.
队名
超级碗
休斯顿德州人队
0
新英格兰爱国者
5.
奥克兰突袭者队
2.
迈阿密海豚
1.
队名
超级碗
亚特兰大猎鹰队
0
达拉斯牛仔队
4.
绿湾包装机
3.
纽约巨人队
2.

这是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;
        }
    }
}
}

函数排序表（n）{
变量表，行，切换，i，x，y，shouldSwitch，dir，switchcount=0；
table=document.getElementsByClassName（“supTable”）；
切换=真；
dir=“asc”；
while（切换）{
切换=错误；
行=table.getElementsByTagName（“TR”）；
对于（i=1；i<（rows.length-1）；i++）{
shouldSwitch=false；
x=行[i].getElementsByTagName（“TD”）[n]；
y=行[i+1].getElementsByTagName（“TD”）[n]；
如果（目录==“asc”）{
if（x.innerHTML.toLowerCase（）>y.innerHTML.toLowerCase（））{
shouldSwitch=true；
打破
}
}否则，如果（dir==“desc”）{
if（x.innerHTML.toLowerCase（）

我想我知道为什么类选择器不起作用，如果得到结果，我很乐意尝试不同的函数。 有人能帮我使用Javascript而不是jQuery吗，因为我目前还不熟悉jQuery

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

---

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

我还没有对此进行测试。尝试一下，看看它是否有效：

 <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>

---

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

至少是相关的，如果不是dupetarget：在第一个表之前缺少你的

。不是答案，但您缺少它。代码中可能有重复的答案。当我复制并粘贴到这里时，我只是不小心错过了它。我不明白为什么你的问题被无缘无故地否决了。这是一个非常有道理的问题。嗨，谢谢你的回答，谢谢你的帮助。我试过你的代码，但似乎对我不起作用。也许我输入错了。我也不知道为什么我的帖子被降级了。我今天真的报名问这个问题，我很困惑为什么有人否决了这个问题。我想我知道问题出在哪里了。getElementsByClassName返回一个数组。您需要选择第一个元素，因此GetElementsByCassName[0]是正确的选择。试试看，告诉我它是否有效。是的，我尝试向其中添加[0]，这很有效，但只适用于类中的第一个数组。因此，如果添加[0]，第一个表在排序时可以工作，但类中的其他表不能。将[0]更改为[1]，然后第二个表工作，但其他表不工作。我不知道是否有办法一次调用类中的所有数组？请确保更改类。看看我的代码。我更改了表'supTable1'和'supTable2'的类名。在class=”“属性和单击事件中的javascript函数调用中。您必须应用所有更改。这可能解决了我的问题！它现在似乎起作用了。我想我忘记给其中一个类重命名了。我将把它添加到更多的表中，然后让您知道它是否仍然有效。祝你好运。

 <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>

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

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