排序（）函數後appendTo tbody

您好我想從一個動態填充的列表中完成表格行 - 表格單元格日期之後tr/td數據附加到表中的tbody。排序（）函數後appendTo tbody

這跟隨我的問題在這裏：JavaScript Sort by Date on table not working其中我已成功排序日期。

感謝

var dates = jQuery('tr.Entries').find('td.event-date > a').map(function() { 
      return jQuery(this).text(); 
      }).get(); 
dates.sort(function(a,b){ 
var dateA = a; 
dateA = dateA.replace(/(..)\/(..)\/(....)/, '$2-$1-$3'); 
var dateB = b; 
dateB = dateB.replace(/(..)\/(..)\/(....)/, '$2-$1-$3'); 

return new Date(dateA).getTime() - new Date(dateB).getTime(); 
}); 
jQuery.each(dates, function (index, value) { 
    //how to append back to tbody? 
    console.log(value); 
});

下面是一些條目（還有很多更 - 動態填充行）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script> 
<table class="event clearfix"> 
    <thead> 
    <tr> 
     <td>Date</td> 
     <td>Event</td> 
     <td>Location</td> 
     <td>Ticket</td> 
    </tr> 
    <tr class="space"></tr> 
    </thead> 
    <tbody> 
    <tr class="Entries"> 
     <td class="event-date"> 
     <a href="#">25/08/2017</a> 
     </td> 
     <td class="event-title"> 
     <a href="#">Live N Local Winter Music Festival</a> 
     </td> 
     <td class="event-location"> 
     <a href="#">Pause Bar, Balaclava</a> 
     </td> 
     <td class="event-ticket-link"> 
     <a href="#" class="button button-normal">BUY TICKET</a> 
     </td> 
    </tr> 
    <tr class="Entries"> 
     <td class="event-date"> 
     <a href="#">15/04/2017</a> 
     </td> 
     <td class="event-title"> 
     <a href="#">Reggae, Seggae &amp; Sega Night</a> 
     </td> 
     <td class="event-location"> 
     <a href="#">Bar Open, Fitzroy Melbourne</a> 
     </td> 
     <td class="event-ticket-link"> 
     <a href="#" class="button button-normal">BUY TICKET</a> 
     </td> 
    </tr> 
    <tr class="Entries"> 
     <td class="event-date"> 
     <a href="#">06/05/2016</a> 
     </td> 
     <td class="event-title"> 
     <a href="#">The Sunraysia Multicultural Festival</a> 
     </td> 
     <td class="event-location"> 
     <a href="#">Nowingi Place, Mildura Victoria</a> 
     </td> 
     <td class="event-ticket-link"> 
     <a href="#" class="button button-normal">BUY TICKET</a> 
     </td> 
    </tr> 
    </tbody> 
</table>

來源

2017-10-14 roshambo

我不是一個實驗JS的用戶，但如果他們沒有那麼多的條目，我只想把它們全部並附加回 – efkin

行排序，而不是直接的identiefied日期。
然後，您可以將已排序的行傳遞給.append()，jQuery將它們全部「一次」添加。

var dateRx = /(..)\/(..)\/(....)/, 
 
    replaceFormat = "$2-$1-$3", 
 
    rows = jQuery('tr.Entries') 
 
      .get() 
 
      .sort(function(rowA, rowB) { 
 
      var dateA = $(rowA).find("td:first a").text().replace(dateRx, replaceFormat), 
 
       dateB = $(rowB).find("td:first a").text().replace(dateRx, replaceFormat); 
 

 
      return new Date(dateA) - new Date(dateB); 
 
      }); 
 

 
jQuery("table.event tbody").append(rows);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<table class="event clearfix"> 
 
    <thead> 
 
    <tr><td>Date</td><td>Event</td></tr> 
 
    <tr class="space"></tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="Entries"> 
 
     <td class="event-date"><a href="#">25/08/2017</a></td> 
 
     <td class="event-title"><a href="#">Live N Local Winter Music Festival</a></td> 
 
    </tr> 
 
    <tr class="Entries"> 
 
     <td class="event-date"><a href="#">15/04/2017</a></td> 
 
     <td class="event-title"><a href="#">Reggae, Seggae &amp; Sega Night</a></td> 
 
    </tr> 
 
    <tr class="Entries"> 
 
     <td class="event-date"><a href="#">06/05/2016</a></td> 
 
     <td class="event-title"><a href="#">The Sunraysia Multicultural Festival</a></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2017-10-14 10:52:06 Andreas

謝謝，作品完美！ – roshambo

我這樣做：

分配一個id屬性<tbody>
在jQuery.each()循環我會用.remove()從<tbody>
刪除循環內的所有<tr>項之前，我會用.append()來再次整理元素添加到<tbody>由id屬性

來源

2017-10-14 10:44:08 efkin

感謝您的輸入，我已接受安德烈亞斯回答。 – roshambo

排序（）函數後appendTo tbody

回答

相關問題