在JavaScript中按月分割表格

Question

我有一個簡單的表格，其中所有數據都是自動生成的。我想要的是我想分開幾個月的表。它應該按降序排列。表格由月份名稱和年份分隔。

我創建了一個小提琴來幫助你。謝謝！ 小提琴： https://fiddle.jshell.net/Hive/cv3c0md2/

<table> 
<tbody> 
    <tr> 
     <td>28 may 2016</td> 
     <td>sometext</td> 
    </tr> 
    <tr> 
     <td>23 may 2016</td> 
     <td>sometext</td> 
    </tr> 
    <tr> 
     <td>16 jun 2016</td> 
     <td>sometext</td> 
    </tr> 
    <tr> 
     <td>20 jun 2016</td> 
     <td>sometext</td> 
    </tr> 
    ... 
</tbody> 
</table> 

我想幾個月分裂。像這樣

<h4>May 2016</h4> 
<table> 
    <tbody> 
    <tr> 
     <td>28 may 2016</td> 
     <td>sometext</td> 
    </tr> 
    <tr> 
     <td>23 may 2016</td> 
     <td>sometext</td> 
    </tr> 
    </tbody> 
</table> 

<h4>Jun 2016</h4> 
<table> 
<tbody> 
    <tr> 
     <td>18 jun 2016</td> 
     <td>sometext</td> 
    </tr> 
    <tr> 
     <td>16 jun 2016</td> 
     <td>sometext</td> 
    </tr> 
    <tr> 
     <td>01 jun 2016</td> 
     <td>sometext</td> 
    </tr> 
</tbody> 
</table> 

<h4>Dec 2016</h4> 
<table> 
<tbody> 
    <tr> 
     <td>18 dec 2016</td> 
     <td>sometext</td> 
    </tr> 
</tbody> 
</table> 

Answer 1

如果將原始行移動到其對應的表中，則不必擔心以後向表中添加額外的列。 用jQuery移動行可以通過將它們附加到另一個表來完成。

您提到了排序，所以下面的內容考慮到源表格沒有正確的排序順序。 （如果它已經是，映射就可以跳過去，因此代碼可能會有所縮短）：

var table= $('table'), //might need a more specific selector if there are more tables 
    rows = table.find('tr').remove().map(function(ind,tr){ //Note the remove. While obtaining the rows, they are also removed from the original table 
     var d = new Date($(tr).children('td:first').text()); 
     return {Row:tr, Date: d, yearMonth : d.getYear() * 100 + d.getMonth()}; //create a mapping of the table row, its date and the month (+year to be safe) 
    }).get(), 
    curym, 
    monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 
rows.sort(function(r1,r2) { return (r1.yearMonth - r2.yearMonth) || r2.Date - r1.Date ; }) //sort so that months are ascending and inner dates are descending. 
    .forEach(function(o){ 
    if(o.yearMonth != curym){ //another month 
    if(curym)table = $('<table>').appendTo(table.parent()); //only start a new table on a second run, otherwise reuse existing table 
    curym = o.yearMonth; 
    $('<h4>').text(monthNames[curym % 100]).insertBefore(table); //insert the header 
    } 
    table.append(o.Row); 
}); 

實現你的提琴：https://fiddle.jshell.net/cv3c0md2/4/（例如小提琴也包含在同一天2次，以顯示它們進行排序）

Answer 2

嘿，我已經創建了一個相同的的jsfiddle和我假設從子表將創建已排序的主表。

的jsfiddle： - https://fiddle.jshell.net/cv3c0md2/1/

代碼： -

var monthNames = ["January", "February", "March", "April", "May", "June", 
     "July", "August", "September", "October", "November", "December" 
    ]; 

    function createRow(row, tr) { 
     $('<td></td>').text(row.find("td:eq(0)").text()).appendTo(tr); 
     $('<td></td>').text(row.find("td:eq(1)").text()).appendTo(tr); 
     $('<td></td>').text(row.find("td:eq(2)").text()).appendTo(tr); 
    } 

    function createTables() { 
     var lastMonth; 
     $.each($("table").find("td:nth-child(1)"), function(index, td) { 
      var row = $(td).closest("tr"); 
      var d = new Date($(td).text()); 
      var table = $("<table />"); 
      var tr = $("<tr></tr>"); 

      if (lastMonth && lastMonth === d.getMonth()) { 
       $(".result").find("table:last").append(tr); 
       createRow(row, tr); 
      } else { 
       var h = $("<h/>"); 
       h.text(monthNames[d.getMonth()] + " " + d.getFullYear()); 
       table.append(tr); 
       createRow(row, tr); 
       $(".result").append("<br/>") 
       $(".result").append(h); 
       $(".result").append(table); 
       lastMonth = d.getMonth(); 
      } 
     }); 
    } 
    $(function() { 

     $("#ds").click(function() { 
      createTables(); 
     }); 
    }); 

在此，你需要點擊拆分按鈕，它會在一個錶轉換成多個表，你可以修改它根據自己的需要。