Question

我试图在Javascript中使用相同的函数对几个表进行排序。这些表都是相似的，我只想让它起作用，当你点击表标题时，它将按字母顺序或按数字顺序排列（从最高到最低），当你再次点击标题时，它会排序反方向行（例如从最低到最高）。

我使用了W3学校的代码：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";

（我仍然不明白为什么你的帖子首先被低估了）

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

1 个答案: