Question

我希望能够将表格中的不同列从 A 到 Z 和 Z 到 A 进行排序。我以前能够让它工作，但现在当我单击向上和向下箭头对表中的数据进行排序时它不起作用。从我在网上看到的例子来看，它看起来是正确的，所以我不确定为什么它不起作用。不确定它是否与我添加到表中的所有引导程序有关

    function sortTable(table_id, n) {
        var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
        table = document.getElementById(table_id);
        switching = true;
        // Set the sorting direction to ascending:
        dir = "asc";
        /* Make a loop that will continue until
        no switching has been done: */
        while (switching) {
            // Start by saying: no switching is done:
            switching = false;
            rows = table.rows;
            /* Loop through all table rows (except the
            first, which contains table headers): */
            for (i = 1; i < (rows.length - 1); i++) {
                // Start by saying there should be no switching:
                shouldSwitch = false;
                /* Get the two elements you want to compare,
                one from current row and one from the next: */
                x = rows[i].getElementsByTagName("TD")[n];
                y = rows[i + 1].getElementsByTagName("TD")[n];
                /* Check if the two rows should switch place,
                based on the direction, asc or desc: */
                if (dir == "asc") {
                    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                        // If so, mark as a switch and break the loop:
                        shouldSwitch = true;
                        break;
                    }
                } else if (dir == "desc") {
                    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                        // If so, mark as a switch and break the loop:
                        shouldSwitch = true;
                        break;
                    }
                }
            }
            if (shouldSwitch) {
                /* If a switch has been marked, make the switch
                and mark that a switch has been done: */
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true;
                // Each time a switch is done, increase this count by 1:
                switchcount++;
            } else {
                /* If no switching has been done AND the direction is "asc",
                set the direction to "desc" and run the while loop again. */
                if (switchcount == 0 && dir == "asc") {
                    dir = "desc";
                    switching = true;
                }
            }
        }
    }

     // Sort table after inserting data
        sortTable('generator-table', 0);

   <!-- Generator Sites Start-->
    <div class="container">
        <div class="row justify-content-center">
            <div class="generator-wrapper text-center" style="display:none" id="generator-section">         
                <div class="generator-list">
                    <table id="generator-table">
                        <div class="table-responsive">
                            <table class="table table-light table-striped">
                                <tr>
                                    <th class="generator-header" colspan="5" style="text-align: center;">Generator Sites</th>
                                </tr>
    
                                <tr>
                                    <th onclick="sortTable('generator-table', 0)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Distance (Miles) </th>
                                    <th onclick="sortTable('generator-table', 0)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Distance (Feet) </th>
                                    <th onclick="sortTable('generator-table', 2)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Generator Name </th>
                                    <th> Generator Address </th>
                                    <th onclick="sortTable('generator-table', 4)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Generator Type(s) </th>
                                </tr>                                   
                                <tbody id="generator-body">
                                </tbody>
                            </table>
                        </div>      
                    </table>
                </div>
            </div>  
        </div>
    </div>
    <!--Generator Sites Table End -->

Answer 1

查看sorttable,js - 它可以让您完全做您想做的事情，并且设置起来非常简单。

您可以在常规 HTML 中制作表格，然后在包含此脚本后将其类设置为 "sortable"，以便在您单击标题时按升序/降序排序。

排序 A 到 Z 或 Z 到 A 时，我的表未排序

1 个答案: