javascript - 在 Javascript 中按月份拆分表

Question

我有一个简单的表格，其中所有数据都是自动生成的。我想要的是我想将表格按月份分开。应该按降序排列。表格由月份名称和年份分隔。

我创建了一个 fiddle 来帮助你。谢谢! fiddle : 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();
      });
  });

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