使用JavaScript对带有日期范围列的HTML表进行排序

Question

例如，如果某列在第一行中包含日期9/17/2018-9/21/22018，在第二行中包含9/30/2018-10/12/2018等，则需要帮助，以便最早对此类列进行排序日期范围。 我现在的桌子：

<table border="1" cellpadding="1" cellspacing="0" class="sortable" 
id="myTable2" style="width:100%;border:1px solid #000000;">
<thead>

<th style="text-align: center;" width="200"><b>Pay Week</b></th>
<th style="text-align: center;" width="200"><b>Date of Intermittent Leave 
Event</b> </th>
<th style="text-align: center;" width="400"><b>Pay Instruction</b></th>

</thead>
<tbody>
<tr>
  <td style="text-align: center;" width="200">8/5/2018 - 8/11/2018</td>
  <td style="text-align: center;" width="200">8/8/2018</td>
  <td style="text-align: center;" width="400">3.0 hour(s) unpaid/ PTO 
(FMLA)</td>
</tr>
<tr>
  <td style="text-align: center;" width="200">8/12/2018 - 8/18/2018</td>
  <td style="text-align: center;" width="200">8/18/2018</td>
  <td style="text-align: center;" width="400">4.0 hour(s) unpaid/ PTO 
(FMLA)</td>
</tr>
<tr>
  <td style="text-align: center;" width="200">9/9/2018 - 9/15/2018</td>
  <td style="text-align: center;" width="200">9/12/2018</td>
  <td style="text-align: center;" width="400">7.0 hour(s) unpaid/ PTO 
(FMLA)</td>
</tr>
<tr>
  <td style="text-align: center;" width="200">9/9/2018 - 9/15/2018</td>
  <td style="text-align: center;" width="200">9/13/2018</td>
  <td style="text-align: center;" width="400">7.0 hour(s) unpaid/ PTO 
(FMLA)</td>
</tr>
<tr>
  <td style="text-align: center;" width="200">9/9/2018 - 9/15/2018</td>
  <td style="text-align: center;" width="200">9/14/2018</td>
  <td style="text-align: center;" width="400">7.0 hour(s) unpaid/ PTO 
(FMLA)</td>
</tr>
<tr>
  <td style="text-align: center;" width="200">9/3/2017 - 9/9/2017</td>
  <td style="text-align: center;" width="200">N/A - Continuous</td>
  <td contenteditable="true" style="text-align: center;" width="400"></td>
</tr>
<tr>
  <td style="text-align: center;" width="200">9/10/2017 - 9/16/2017</td>
  <td style="text-align: center;" width="200">N/A - Continuous</td>
  <td contenteditable="true" style="text-align: center;" width="400"></td>
</tr>
<tr>
  <td style="text-align: center;" width="200">9/17/2017 - 9/23/2017</td>
  <td style="text-align: center;" width="200">N/A - Continuous</td>
  <td contenteditable="true" style="text-align: center;" width="400"></td>
</tr>
<tr>
  <td style="text-align: center;" width="200">9/24/2017 - 9/30/2017</td>
  <td style="text-align: center;" width="200">N/A - Continuous</td>
  <td contenteditable="true" style="text-align: center;" width="400"></td>
</tr>
<tr>
  <td style="text-align: center;" width="200">10/1/2017 - 10/7/2017</td>
  <td style="text-align: center;" width="200">N/A - Continuous</td>
  <td contenteditable="true" style="text-align: center;" width="400"></td>
</tr>
<tr>
  <td style="text-align: center;" width="200">10/8/2017 - 10/14/2017</td>
  <td style="text-align: center;" width="200">N/A - Continuous</td>
  <td contenteditable="true" style="text-align: center;" width="400"></td>
</tr>
<tr>
  <td style="text-align: center;" width="200">10/15/2017 - 10/21/2017</td>
  <td style="text-align: center;" width="200">N/A - Continuous</td>
  <td contenteditable="true" style="text-align: center;" width="400"></td>
</tr>
</tbody>
</table>
<button>Sort Pay Week</button>

<script>
  function convertDate(d) {
    var str = d.split("-", 1);
    var p = str.split("/");
    return +(p[2] + p[0] + p[1]);
  }

  function sortByDate() {
    var tbody = document.querySelector("#results tbody");
    // get trs as array for ease of use
    var rows = [].slice.call(tbody.querySelectorAll("tr"));

    rows.sort(function(a, b) {
      return convertDate(a.cells[0].innerHTML) - convertDate(b.cells[0].innerHTML);
    });

    rows.forEach(function(v) {
      tbody.appendChild(v); // note that .appendChild() *moves* elements
    });
  }

  document.querySelector("button").addEventListener("click", sortByDate);

</script>

对第一列进行排序后，第二列的值将变得混乱，如何仅对包含日期的行而不对不包含NA连续单元格的行进行排序？

Answer 1

我为你做的。 请检查https://codepen.io/agamj474/pen/KxGEXV。

function convertDate(d) {
    var str = d.split("-", 1)[0].trim();
    var p = str.split("/");
    return new Date(p[2] + "-"+p[0]+"-" + p[1]);
  }

  function sortByDate() {
    var tbody = document.querySelector("#myTable2 tbody");
    // get trs as array for ease of use
    var rows = [].slice.call(tbody.querySelectorAll("tr"));

    rows.sort(function(a, b) {
      return convertDate(a.cells[0].innerHTML) - convertDate(b.cells[0].innerHTML);
    });

    rows.forEach(function(v) {
      tbody.appendChild(v); // note that .appendChild() *moves* elements
    });
  }

  document.querySelector("button").addEventListener("click", sortByDate);