通过 Javascript 对 HTML 表格进行排序

Posted 2023-03-05

【中文标题】通过 Javascript 对 HTML 表格进行排序

【英文标题】：Sort HTML table by Javascript

【发布时间】：2021-12-21 23:52:54

【问题描述】：

我有以下 html 表格，我想按 data-sku="" 排序

( function() 
        $("table tbody tr").sort(sort_table).appendTo('table tbody');
            function sort_table(a, b) 
            return ($(b).data('sku')) < ($(a).data('sku')) ? 1 : -1;
        
 )();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="abp-product-42" data-id="42" data-sku="A-04-0002"><td>A-04-0002</tr>
<tr class="abp-product-21" data-id="21" data-sku="A-04-0011"><td>A-04-0011</td></tr>
<tr class="abp-product-391" data-id="391" data-sku="A-02-0008"><td>A-02-0008</td></tr>
<tr class="abp-product-393" data-id="393" data-sku="A-02-0007"><td>A-02-0007</td></tr>
<tr class="abp-product-40" data-id="40" data-sku="A-04-0010"><td>A-03-0010</td></tr>
<tr class="abp-product-390" data-id="390" data-sku="A-03-0003"><td>A-04-0003</td></tr>
</tbody>
</table>

但不知何故它不起作用 - 我做错了什么或我错过了什么？

【问题讨论】：

但不应该是A-03-0010above A-04-0003?

如果没有 jquery，我会访问 tbody 子节点，将其复制到数组 .sort((a, b) => a.localeCompare(b))，删除原始子节点并从数组中插入子节点

@JohnSmith 值不匹配，您的代码没问题

最后 2 行的 data-sku 属性与其单元格内容不匹配。

@TBA 谢谢大家！我在想我疯了。最后但并非最不重要的一点是，我如何扩展函数，使其每 5 秒刷新一次函数以检查表是否已更改（产品已删除或添加）我是否间隔一段时间执行此操作？

【参考方案1】：

这将像我在评论中提到的那样每 5 秒调用一次您的函数。

window.setInterval(function()
 sortData();
, 5000);

function sortData()
 $("table tbody tr").sort(sort_table).appendTo('table tbody');
            function sort_table(a, b) 
            return ($(b).data('sku')) < ($(a).data('sku')) ? 1 : -1;
        

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="abp-product-42" data-id="42" data-sku="A-04-0002"><td>A-04-0002</tr>
<tr class="abp-product-21" data-id="21" data-sku="A-04-0011"><td>A-04-0011</td></tr>
<tr class="abp-product-391" data-id="391" data-sku="A-02-0008"><td>A-02-0008</td></tr>
<tr class="abp-product-393" data-id="393" data-sku="A-02-0007"><td>A-02-0007</td></tr>
<tr class="abp-product-40" data-id="40" data-sku="A-04-0010"><td>A-04-0010</td></tr>
<tr class="abp-product-390" data-id="390" data-sku="A-03-0003"><td>A-03-0003</td></tr>
<tr class="abp-product-390" data-id="390" data-sku="A-05-0003"><td>A-05-0003</td></tr>
</tbody>
</table>

【讨论】：

非常感谢！干杯，约翰

@JohnSmith 没问题，很高兴为您提供帮助^_^

【参考方案2】：

您的代码运行良好。 只是，最后两行属性data-sku 与它的单元格内容不匹配。

<tr class="abp-product-40" data-id="40" data-sku="A-04-0010">
    <td>A-03-0010</td>
</tr>
<tr class="abp-product-390" data-id="390" data-sku="A-03-0003">
    <td>A-04-0003</td>
</tr>

(function () 
    function sort_table(a, b) 
        return ($(b).attr('data-sku')) < ($(a).attr('data-sku')) ? 1 : -1;
    
    $("table tbody tr").sort(sort_table).appendTo('table tbody');
)();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr class="abp-product-42" data-id="42" data-sku="A-04-0002">
            <td>A-04-0002
        </tr>
        <tr class="abp-product-21" data-id="21" data-sku="A-04-0011">
            <td>A-04-0011</td>
        </tr>
        <tr class="abp-product-391" data-id="391" data-sku="A-02-0008">
            <td>A-02-0008</td>
        </tr>
        <tr class="abp-product-393" data-id="393" data-sku="A-02-0007">
            <td>A-02-0007</td>
        </tr>
        <tr class="abp-product-40" data-id="40" data-sku="A-03-0010">
            <td>A-03-0010</td>
        </tr>
        <tr class="abp-product-390" data-id="390" data-sku="A-04-0003">
            <td>A-04-0003</td>
        </tr>
    </tbody>
</table>