使用JavaScript按data-sku属性排序HTML表格失效问题排查

让我帮你梳理下代码无法正常工作的原因，主要有三个关键问题：

1. jQuery加载顺序错误 #

你把自定义的排序脚本写在了jQuery引入代码的前面！当浏览器执行你的自执行函数时，$这个jQuery的缩写还没被定义（因为jQuery还没加载完成），所以这段排序代码根本不会被执行。必须把jQuery的<script>标签放在自定义脚本的前面。

2. HTML结构存在语法错误 #

第一个表格行的<td>标签没闭合：

<tr class="abp-product-42" data-id="42" data-sku="A-04-0002"><td>A-04-0002</tr>

这里应该改成：

<tr class="abp-product-42" data-id="42" data-sku="A-04-0002"><td>A-04-0002</td></tr>

这种DOM结构的语法错误会导致jQuery无法正确识别表格行，甚至可能让整个表格渲染异常，直接影响后续的排序操作。

3. 字符串排序逻辑不够严谨 #

你直接用<运算符比较data-sku的字符串值，虽然在部分场景下能运行，但对于这种带连字符的编码格式，更可靠的方式是使用JavaScript字符串的localeCompare()方法，它能处理自然排序的场景，避免出现意外的排序结果。

修正后的完整代码 #

<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</td></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>

<script>
(function() {
  $("table tbody tr").sort(sort_table).appendTo('table tbody');
  function sort_table(a, b) {
    // 升序排列：a的sku在前则返回负数，在后则返回正数
    return $(a).data('sku').localeCompare($(b).data('sku'));
    // 如果需要降序，只需调换a和b的位置：
    // return $(b).data('sku').localeCompare($(a).data('sku'));
  }
})();
</script>

这段修正后的代码会按照data-sku的字符串自然顺序对表格行进行排序，你可以根据需求切换升序/降序的逻辑。

内容的提问来源于stack exchange，提问作者John Smith