当单元格为超链接时，PHP HTML Table 未按数字排序

Question

所以我的 PHP 页面中有一个 HTML table（从 MySQL 数据库填充）和一个特定的列，我想在点击时对其进行数字排序在列 header 上。按字母顺序，排序功能没有问题。在数字上，排序功能仅在我放置没有超链接的数据时才起作用。这是 table（有和没有超链接）：

            <table class="table table-bordered table-striped table-hover" id="myTable">
                <thead class="thead-dark">
                    <tr style="cursor: pointer;">
                        <th onclick="sortTableId()">ID</th>
                        <th onclick="sortTable(1)">Titre</th>
                        <th onclick="sortTable(2)">Date de création</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    while ($row = mysqli_fetch_array($result)) {
                    ?>
                    <tr>
                        <td><?php echo $row[0];?></td>
                        <td><?php echo $row[1]; ?></td>
                        <td><?php echo $row[2]; ?></td>
                    </tr>
                    <?php
                        }

                    ?>
                </tbody>
            </table>

          <table class="table table-bordered table-striped table-hover" id="myTable">
                <thead class="thead-dark">
                    <tr style="cursor: pointer;">
                        <th onclick="sortTableId()">ID</th>
                        <th onclick="sortTable(1)">Titre</th>
                        <th onclick="sortTable(2)">Date de création</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    while ($row = mysqli_fetch_array($result)) {
                    ?>
                    <tr>
                        <td><a href=petition-admin.php?id=<?php echo $row[0]?>'><?php echo $row[0]; ?></a></td>
                        <td><?php echo $row[1]; ?></td>
                        <td><?php echo $row[2]; ?></td>
                    </tr>
                    <?php
                        }

                    ?>
                </tbody>
            </table>

和 JavaScript 排序函数：

function sortTableId() {
var table, rows, switching, i, x, y, a, b, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
dir = "asc";
while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
        shouldSwitch = false;
        x = rows[i].getElementsByTagName("TD")[0];
        y = rows[i + 1].getElementsByTagName("TD")[0];
        if (dir == "asc") {
            if (Number(x.innerHTML) > Number(y.innerHTML)) {
                shouldSwitch = true;
                break;
              }
        }
        else if (dir == "desc") {
            if (Number(x.innerHTML) < Number(y.innerHTML)) {
                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

您正在使用 innerHTML，它将包含内部 HTML 标记，因此数字转换将......很有趣。

改用innerText or textContent。

例如：

if (Number(x.innerText) > Number(y.innerText))

如果你真的想变得很花哨，你可以添加一个 data-sortdata 数据属性，也许还有一个 data-sortdatatype 属性来处理诸如货币（$4,000.00）布尔值或单元格中的图像之类的东西（想想检查标记bools 等）并对这些而不是单元格中的标记执行排序

当单元格为超链接时，PHP HTML Table 未按数字排序

PHP HTML Table is not sorting numerically when cells are hyperlinks

javascript

php

sorting