按两列香草js排序表[重复]

Question

如何在页面加载时按两列（名称、可用）对表格进行排序？我可以使用香草js

        <table class="table_sort">
    <thead>
    <tr>
        <th class="sorted-asc">Name</th>
        <th>Genre</th>
        <th>Publish year</th>
        <th>Quanity</th>
        <th class="available">Available</th>
    </tr>
    </thead>

    <tbody id="tbody">
    <tr>
        <td>aname1</td>

        <td>genre1</td>

        <td>year1</td>
        <td>quantity1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>name1</td>

        <td>genre1</td>

        <td>year1</td>
        <td>quantity1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>aname1</td>

        <td>genre1</td>

        <td>year1</td>
        <td>quantity1</td>
        <td>10</td>
    </tr>
    <tr>
        <td>aname1</td>

        <td>genre1</td>

        <td>year1</td>
        <td>quantity1</td>
        <td>6</td>
    </tr>

    </tbody>
</table>

我尝试按两列对表格进行排序：名称、可用但它不起作用。

    document.addEventListener('DOMContentLoaded', () => {
const table = document.querySelector('.table_sort');
const indexToSorting = [...table.tHead.rows[0].cells].findIndex(cell => cell.classList.contains('sorted-asc'));
const availableIndexes = [...table.tHead.rows[0].cells].findIndex(cell => cell.classList.contains('available'));
const sortedRows = [...table.tBodies[0].rows].sort((rowA, rowB) => {
    let cellC;
    let cellD;
    const sortedRowsByAvailable = [...table.tBodies[0].rows].sort((rowC, rowD) => {
        cellC = rowC.cells[availableIndexes].innerText;
        cellD = rowD.cells[availableIndexes].innerText;
        const availableComparison = cellC.localeCompare(cellD);
        return availableComparison;

    });
    const cellA = rowA.cells[indexToSorting].innerText;
    const cellB = rowB.cells[indexToSorting].innerText;
    const nameComparison = cellA.localeCompare(cellB);
    return nameComparison !== 0 ? nameComparison : sortedRowsByAvailable
});

table.tBodies[0].append(...sortedRows);

});

我的表按名称排序，但我需要按列排序：名称，可用。我的错误在哪里？没看懂，请帮帮我

Answer 1

TBH，我不明白你为什么这样做cellA - cellB，但你需要为Available 单元格添加一个比较，以防cellA 和cellB 相等。

const rowAAvailable = rowA.cells[indexToSorting].innerText;
const rowBAbailable = rowB.cells[indexToSorting].innerText;
const nameComparison = cellA.localeCompare(cellB);
const availableComparison = rowAAvailable.localeCompare(rowBAbailable); // sorry for terrible naming, but you get the idea
return nameComparison !== 0 ? nameComparison : availableComparison

这会将您的表格按名称排序为第一优先级，第二个可用。