修改jQuery可排序表格：点击Title按标题字符长度排序

针对t-1（解析单元格内容排序） #

核心是把原有的字符串比较逻辑，替换成取单元格文本长度的数值比较。

假设原排序代码类似这样：

$('#t-1 th:contains("Title")').on('click', function() {
  const rows = $('#t-1 tbody tr').toArray().sort(function(a, b) {
    const textA = $(a).find('td:first').text().toUpperCase();
    const textB = $(b).find('td:first').text().toUpperCase();
    return textA.localeCompare(textB);
  });
  $('#t-1 tbody').append(rows);
});

修改后代码：

$('#t-1 th:contains("Title")').on('click', function() {
  const rows = $('#t-1 tbody tr').toArray().sort(function(a, b) {
    const lenA = $(a).find('td:first').text().length;
    const lenB = $(b).find('td:first').text().length;
    // 升序排序，要降序就改成 lenB - lenA
    return lenA - lenB;
  });
  $('#t-1 tbody').append(rows);
});

针对t-2（读取HTML5 data属性排序） #

不用修改data属性的值，只需要调整排序时的取值逻辑——从拿data里的字符串，改成拿字符串的长度。

假设原排序代码类似：

$('#t-2 th:contains("Title")').on('click', function() {
  const rows = $('#t-2 tbody tr').toArray().sort(function(a, b) {
    const valA = $(a).find('td:first').data('sort').toUpperCase();
    const valB = $(b).find('td:first').data('sort').toUpperCase();
    return valA.localeCompare(valB);
  });
  $('#t-2 tbody').append(rows);
});

修改后代码：

$('#t-2 th:contains("Title")').on('click', function() {
  const rows = $('#t-2 tbody tr').toArray().sort(function(a, b) {
    const lenA = $(a).find('td:first').data('sort').length;
    const lenB = $(b).find('td:first').data('sort').length;
    return lenA - lenB;
  });
  $('#t-2 tbody').append(rows);
});

如果想通过data属性直接存长度优化性能，可以给td加data-length属性（比如<td data-sort="The Great Gatsby" data-length="15">...</td>），然后排序时取这个数值：

const lenA = parseInt($(a).find('td:first').data('length'), 10);
const lenB = parseInt($(b).find('td:first').data('length'), 10);

针对t-3（从JSON数据重建HTML排序） #

直接在JSON数据层面按标题长度排序，再重新渲染表格即可。

假设原JSON数据和排序逻辑类似：

const bookData = [
  { title: "1984", author: "George Orwell" },
  { title: "To Kill a Mockingbird", author: "Harper Lee" }
];

$('#t-3 th:contains("Title")').on('click', function() {
  const sortedData = bookData.sort(function(a, b) {
    return a.title.toUpperCase().localeCompare(b.title.toUpperCase());
  });
  const tbody = $('#t-3 tbody').empty();
  sortedData.forEach(book => {
    tbody.append(`<tr><td>${book.title}</td><td>${book.author}</td></tr>`);
  });
});

修改后代码：

let titleSortAsc = true;
$('#t-3 th:contains("Title")').on('click', function() {
  const sortedData = bookData.sort(function(a, b) {
    const lenDiff = a.title.length - b.title.length;
    // 点击切换升序/降序
    return titleSortAsc ? lenDiff : -lenDiff;
  });
  titleSortAsc = !titleSortAsc;
  
  const tbody = $('#t-3 tbody').empty();
  sortedData.forEach(book => {
    tbody.append(`<tr><td>${book.title}</td><td>${book.author}</td></tr>`);
  });
});

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