用jQuery對表行進行排序

Question

我正在嘗試使用具有以下功能的jquery對表行進行排序：

                var items = $('#dp_content_table > tbody > tr').sort(function(a, b) {
                    var vA = $(a).attr('id');
                    var vB = $(b).attr('id');

                    var arrA = vA.split('_');
                    var arrB = vB.split('_');

                    return (arrA[1] < arrB[1]) ? -1 : (arrA[1] > arrB[1]) ? 1 : (arrA[1] == arrB[1] && arrA[5] < arrB[5]) ? -1 : (arrA[1] == arrB[1] && arrA[5] > arrB[5]) ? 1 : 0;
                });

                    $('#dp_content_table > tbody > tr').append(items);

基本上，我使用ID作為排序屬性。 該屬性包含日期和時間。 attr [1]是日期，而attr [5]是時間。 如果行A中的天小於B，則無需比較時間，並返回結果，另一方面，如果天數相同，則比較第二個屬性，即時間，依此類推。

但是，到目前為止，我對它們進行排序沒有運氣。 我的桌子似乎根本不起作用。

之前謝謝。

Answer 1

您可以在jquery中比較日期。 也許對您有幫助。

https://stackoverflow.com/a/18913695/3617531

無論如何，在您的代碼中，您正在使用split，然后在進行字符串比較，而不是數字1。 您也許應該將它們轉換為整數：

            var items = $('#dp_content_table > tbody > tr').sort(function(a, b) {
                var vA = $(a).attr('id');
                var vB = $(b).attr('id');

                var arrA = vA.split('_');
                var arrB = vB.split('_');

                return (parseInt(arrA[1]) < parseInt(arrB[1])) ? -1 : (parseInt(arrA[1]) > parseInt(arrB[1])) ? 1 : (parseInt(arrA[1]) == parseInt(arrB[1]) && parseInt(arrA[5]) < parseInt(arrB[5])) ? -1 : (parseInt(arrA[1]) == parseInt(arrB[1]) && parseInt(arrA[5]) > parseInt(arrB[5])) ? 1 : 0;
            });

                $('#dp_content_table > tbody > tr').append(items);

Answer 2

jQuery的sort是內置的Array.prototype.sort ，傳遞給它的值是選擇器返回的DOM元素，因此用a.id替換$(a).attr('id') 效率要高得多 。 以及更少的打字。

如果ID是ISO 8601格式的日期字符串，則可以將它們按字符串排序而不轉換為數字或日期：

<table>
  <tr id="2015-05-16T10:00:00.000Z">
   <td>2015-05-16T10:00:00.000Z
  <tr id="2015-05-16T09:00:00.000Z">
   <td>2015-05-16T09:00:00.000Z
  <tr id="2015-05-16T11:00:00.000Z">
   <td>2015-05-16T11:00:00.000Z
<table>

<script>
(function() {
  var rows = $('tr').sort(function(a, b){
    return a.id < b.id ? -1 : a.id > b.id? 1 : 0;
  })

  $('table > tbody').append(rows);
}());
</script>

但是，實際上不應該那樣使用id，最好在data *屬性中包含值，因為您可能希望具有相同的值。

編輯

將鏈接添加到jsperf。