如何按"TableId"对具有相同功能的多个表进行排序？

Question

我正在尝试 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table_desc，但它不适用于多个 table。

    <table id="tableData1">
        <tr>
            <th onclick="sortTable(0)">Input Date</th>
            <th onclick="sortTable(1)">Periode</th>
            <th onclick="sortTable(2)">Account</th>
        </tr>
        <tr>
            <td>2019-05-13</td>
            <td>2019-05</td>
            <td>Name A</td>
        </tr>
        <tr>
            <td>2019-04-02</td>
            <td>2019-04</td>
            <td>Name A</td>
        </tr>
        <tr>
            <td>2019-03-02</td>
            <td>2019-03</td>
            <td>Name A</td>
        </tr>
    </table>
    <table id="tableData2">
        <tr>
            <th onclick="sortTable(0)">Input Date</th>
            <th onclick="sortTable(1)">Periode</th>
            <th onclick="sortTable(2)">Account</th>
        </tr>
        <tr>
            <td>2019-05-10</td>
            <td>2019-05</td>
            <td>Name B</td>
        </tr>
        <tr>
            <td>2019-04-01</td>
            <td>2019-04</td>
            <td>Name B</td>
        </tr>
        <tr>
            <td>2019-03-05</td>
            <td>2019-03</td>
            <td>Name B</td>
        </tr>
    </table>

这是 Javascript 代码：

var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;

table = document.getElementsById("tableData");
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;
        }
    }
}
}

我知道为什么该脚本不起作用，该脚本仅适用于一个 table 不适用于多个，但是，我可以将此脚本用于同一页面中的多个 table 吗？

谢谢。

Answer 1

您的代码在 table = document.getElementsById("tableData"); 失败因为该元素不存在并且它是 getElementById（单个元素）。您可以将代码更改为 <th onclick="sortTable('dataTab1e1', 0)">Input Date</th> 然后将您的功能更改为：

function sortTable(divName, item ) {
   var table = document.getElementById( divName );
....
}

如何按"TableId"对具有相同功能的多个表进行排序？

How to sort multiple tables with same function by "TableId"?

html

javascript

sorttable.js