使用 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-Continuous 單元格的行進行排序？

Answer 1

我為你做的：

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);

代碼筆： https ://codepen.io/agamj474/pen/KxGEXV。