按它们的“名称”值对 <tr> 标记进行排序

Question

我需要按名称属性值对我的tr 标签进行排序。

这种情况下可以使用sort方法吗？

或者还有其他方法可以做到这一点？

我的排序功能在代码的底部

首先，我获取输入值并将其附加到其 parent() 名称 attr。价值 之后，我需要使用名称 attr 按字母顺序对我的 -s 数组进行排序。价值观。

$(function() {
  var tableHead =
      "<table>" +
      "<tr>" +
      "<th class='sort'>Id <span class='downArrow'>&darr;</span>&nbsp;&nbsp;<span class='upArrow'>&uarr;</span></th>" +
      "<th id='sort_name'>Name sort</th>" +
      "<th>Surname</th>" +
      "<th>Birthday</th>" +
      "<th>Filter</th>" +
      "<th class='addList'>+</th>" +
      "</tr>" +
      "</table>";

  $('body').html(tableHead);
  var inputName = "<input type='text' class='name' placeholder='First name'>";
  var inputSurname = "<input type='text' class='surname' placeholder='Surname'>";
  var bDayDate = "<input type='date' class='bDayDate' placeholder='Bday'>";
  var addList = $('.addList');
  var downArrow = $(".downArrow");
  var upArrow = $(".upArrow");
  var idNum = 0;
  var arrNum = [];
  var nameArr = [];
  var sortedNameArr = [];
  var sortedArr = [];
  addList.on("click", function() {
    idNum++;
    var tr = $("<tr></tr>");
    for (var i = 1; i <= 6; i++) {
      var td = $('<td></td>');
      tr.addClass("" + idNum);
      switch (i) {
        case 1:
          td.addClass("" + idNum);
          td.html(idNum);
          break;
        case 2:
          td.html(inputName);
          break;
        case 3:
          td.html(inputSurname);
          break;
        case 4:
          td.html(bDayDate);
          break;
        case 5:
          td.html(1);
          break;
        case 6:
          td.html("Delete");
          td.addClass('delete');
          break;
        default:
          return console.log("OooPs!!");
      }
      tr.append(td);
    }
    arrNum.push(tr);
    $('table').append(arrNum);

    $('.delete').on("click", function() {
      removeItem(this, arrNum, sortedArr);
    });

    for (var j = arrNum.length; j >= 0; j--) {
      sortedArr.push(arrNum[j]);
    }

    downArrow.on("click", function() {
      $('table').append(sortedArr);
      $('.delete').on("click", function() {
        $(this).parent().remove();
      });
    });

    upArrow.on("click", function() {
      $('table').append(arrNum);
    });


    function removeItem(item, arr, sArr) {
      var that = $(item).parent();
      $(item).parent().remove();

      for (var k = 0; k < arr.length; k++) {
        if (arr[k] && that[0] === arr[k][0]) {
          arr.splice(k, 1);
        } else {
          // console.log(that[0]);
          // console.log(arr[k][0])
        }
      }

      // If you want delete when sort the table
      for (var k = 0; k < sArr.length; k++) {
        if (sArr[k] && that[0] === sArr[k][0]) {
          sArr.splice(k, 1);
        } else {
          // console.log("wrong!!")
        }
      }
    }

  });

  $("#sort_name").on("click", function() {
    var name = $(".name");

    for (var n = 0; n < arrNum.length; n++) {
      var trName = arrNum[n][0];
      $(trName).attr("name", $(name[n]).val());
      nameArr.push(trName);
      // console.log(nameArr[n])
    }
    nameArr.sort();
    for (var n = 0; n < arrNum.length; n++) {
      console.log(nameArr[n])
    }

  });
});

Answer 1

您可以使用以下代码对数据表进行排序，以便在数组点击事件上调用，就像您使用所需字段进行函数调用一样。

function sortTable(table, order) {
    var asc   = order === 'asc',
        tbody = table.find('tbody');

    tbody.find('tr').sort(function(a, b) {
        if (asc) {
            return $('td:first', a).text().localeCompare($('td:first', b).text());
        } else {
            return $('td:first', b).text().localeCompare($('td:first', a).text());
        }
    }).appendTo(tbody);
}
could be called on any table like this ther your table may be very by selector.

sortTable($('#mytable'),'asc');
sortTable($('#mytable'),'desc');