如何通过“TableId”对具有相同功能的多个表进行排序？答案

【问题标题】：How to sort multiple tables with same function by "TableId"?如何通过“TableId”对具有相同功能的多个表进行排序？
【发布时间】：2019-05-19 04:11:48
【问题描述】：

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

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

我知道为什么脚本不起作用，这个脚本只适用于一个表而不适用于多个，但是，我可以在同一页面中将这个脚本用于多个表吗？

谢谢。

【问题讨论】：

标签： javascript html sorttable.js

【解决方案1】：

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

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

【讨论】：