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

嘿，我为此创建了一个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();
      });
  });

在此您需要单击拆分按钮，它会将一个表转换为多个表，您可以根据需要对其进行修改。

Answer 2

如果将原始行移动到其对应的表，则不必担心稍后会向表中添加额外的列。使用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次以显示它们已被分类）

在Javascript中按月拆分表

2 个答案: