Question

嗨我想在一个表格行 - 表格单元格日期来自动态填充的列表后，将tr / td数据追回到表格中的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>

Answer 1

直接对行进行排序，而不是日期然后，您可以将已排序的行传递给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);，jQuery将“一次性”添加它们。

<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>

new Vue({
  el: '#app',
  data () {
    return {
      accountitems5: 'some value for 5',
      accountitems6: 'value for six',
      sbutton5: false,
      sbutton6: false
    }
  },
  methods: {
    saveData (inputval) {
      // save function runs here
    }
  }
})

Answer 2

我会这样做：

将id属性分配给<tbody>
在jQuery.each()循环之前，我会使用.remove()删除<tr>

<tbody>

在循环中，我会使用.append()将已排序的元素再次添加回<tbody> id属性

在sort（）函数之后追加到tbody

2 个答案: