在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(); 
     }); 
    }); 

在此，你需要点击拆分按钮，它会在一个表转换成多个表，你可以修改它根据自己的需要。