如何使用jQuery使用第一个表格数据值对所有表格行进行排序？

Question

我有一个JavaScript对象，定义如下：

<tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick(); ">
<td class="GridRow">Dorothy Allen</td>
<td class="GridRow">3</td>
<td class="GridRow">3</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Not Set</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Consultant</td>
<td class="GridRow">Exceptional</td>
<td class="GridRow">High</td>
<td class="GridRow">DF855EC2-C04F-487A-85DE-9FBEFC0527BF</td>
</tr>

<tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick(); ">
<td class="GridRow">Keith  Austin</td>
<td class="GridRow">3</td>
<td class="GridRow">3</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Not Set</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Senior Telesales</td>
<td class="GridRow">Exceptional</td>
<td class="GridRow">High</td>
<td class="GridRow">3FDEE46E-EC02-448C-A709-E9284712B796</td>
</tr>

<tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick(); ">
<td class="GridRow">​Margaret Fatania</td>
<td class="GridRow">3</td>
<td class="GridRow">3</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Not Set</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Consultant</td>
<td class="GridRow">Exceptional</td>
<td class="GridRow">High</td>
<td class="GridRow">DF855EC2-C04F-487A-85DE-9FBEFC0527BF</td>
</tr>

<tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick(); ">
<td class="GridRow">Ahmed Zia</td>
<td class="GridRow">3</td>
<td class="GridRow">3</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Not Set</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Senior Telesales</td>
<td class="GridRow">Exceptional</td>
<td class="GridRow">High</td>
<td class="GridRow">3FDEE46E-EC02-448C-A709-E9284712B796</td>
</tr>

<tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick(); ">
<td class="GridRow">Francis Becker</td>
<td class="GridRow">3</td>
<td class="GridRow">3</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Not Set</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Consultant</td>
<td class="GridRow">Exceptional</td>
<td class="GridRow">High</td>
<td class="GridRow">DF855EC2-C04F-487A-85DE-9FBEFC0527BF</td>
</tr>

<tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick(); ">
<td class="GridRow">Richard  Henry</td>
<td class="GridRow">3</td>
<td class="GridRow">3</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Not Set</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Senior Telesales</td>
<td class="GridRow">Exceptional</td>
<td class="GridRow">High</td>
<td class="GridRow">3FDEE46E-EC02-448C-A709-E9284712B796</td>
</tr>

我需要能够对该对象进行排序，以便TR行按字母顺序理想地按姓氏然后按姓氏排序。

我已经看到很多示例，如果TR行位于表中并且使用jQuery sort的tbody元素。

但是我不确定如何使用上面的对象执行此操作。

全名是每行的第一个TD元素，例如“ Dorothy Allen”。

Answer 1

这是一个小提琴 ，应该可以解决您想要的问题。

使用的概念：

• JavaScript数组
• JavaScript排序
• jQuery追加

相关位：

$(document).ready(function() {

  // Here's a JavaSript array of objects that represent the data you have in your HTML table.
  var data = [{
    name: 'Dorothy Allen',
    num1: 3,
    num2: 3,
    set: 'Not Set',
    role: 'Consultant',
    ability: 'Exceptional',
    level: 'High',
    id: 'DF855EC2-C04F-487A-85DE-9FBEFC0527BF'
  }, {
    name: 'Keith Austin',
    num1: 3,
    num2: 3,
    set: 'Not Set',
    role: 'Senior Telesales',
    ability: 'Exceptional',
    level: 'High',
    id: '3FDEE46E-EC02-448C-A709-E9284712B796'
  }, {
    name: 'AAA AAAA',
    num1: 3,
    num2: 3,
    set: 'Not Set',
    role: 'Senior Telesales',
    ability: 'Exceptional',
    level: 'High',
    id: '3FDEE46E-EC02-448C-A709-E9284712B796'
  },
  {
    name: 'ZZZ ZZZZ',
    num1: 3,
    num2: 3,
    set: 'Not Set',
    role: 'Senior Telesales',
    ability: 'Exceptional',
    level: 'High',
    id: '3FDEE46E-EC02-448C-A709-E9284712B796'
  }];

  // sort will alter the array in place. 
  //  No need to return/cache it off.
  data.sort(function(a, b) {
    var aName = a.name.split(' '),
      bName = b.name.split(' ');
    var aForename = aName[0].toUpperCase(),
      aSurname = aName[1].toUpperCase(),
      bForename = bName[0].toUpperCase(),
      bSurname = bName[1].toUpperCase();

    if (aSurname < bSurname) return -1;
    if (aSurname > bSurname) return 1;
    if (aSurName === bSurname) {
      if (aForename < bForename) return -1;
      if (aForename > bForename) return 1;
      return 0; // They're equal.
    }
  });

  // Loop through each item (sorted now), and create HTML <tr>
  //  Append created <tr> to table in HTML.
  data.forEach(function(item) {
    var itemHtml = '<tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick();">' + '<td class="GridRow">' + item.name + '</td><td class="GridRow">' + item.num1 + '</td><td class="GridRow">' + item.num2 + '</td><td class="GridRow">&nbsp;</td><td class="GridRow">' + item.set + '</td><td class="GridRow">&nbsp;</td><td class="GridRow">' + item.role + '</td><td class="GridRow">' + item.ability + '</td><td class="GridRow">' + item.level + '</td><td class="GridRow">' + item.id + '</td></tr>';

    $('table > tbody').append(itemHtml);
  });
});

Answer 2

谢谢你的帮助。

我设法使用下面的代码片段对其进行了修复。

        // Sort the list in alphabetical order (surname first, then forename)
        function sortEmployees(list){
            var rows = list;

            rows.sort(function(a, b) {
                // Get 'TD' element
                var A = $(a).children('td').eq(0).text().toUpperCase();
                var B = $(b).children('td').eq(0).text().toUpperCase();

                //Split Full Name
                var aName = A.split(' ');
                var bName = B.split(' ');

                // Get Forename and Surname
                var aForename = aName[0];
                var aSurname = aName[1];
                var bForename = bName[0];
                var bSurname = bName[1];

                //Comparisons
                if (aSurname < bSurname) return -1;

                if (aSurname > bSurname) return 1;

                if (aSurname === bSurname) {
                  if (aForename < bForename) return -1;
                  if (aForename > bForename) return 1;
                  return 0; // They're equal.
                }

            });

            return rows;
        }