title: JavaScript sort function is not sorting and I cannot figure out why
body: <p>I am working on a web app which I am new at but I have been developing apps for many years for the business forms industry so am not new at development but am pretty new at web dev.</p>
  <p>Below is a stripped down sample to show my problem that I am running on Chrome.   I picked up a solution from <a href="https://stackoverflow.com/questions/38889423/sort-table-in-html-by-column-with-date-values-desc-using-only-javascript">Sort table in HTML by column with date values desc using only javaScript</a> and removed the 'by date' part to make it easier. The problem seems to be in the <code>rows.sort()</code> part as it doesn't seem to be sorting the array at all.</p>
  <p>The comments in the code that start with <code>//'by MPG'</code> are my comments and the others from the downloaded code. I do understand that jquery can do this but I want to stay with JavaScript as I really dont want to load and learn another language.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function calcbal() {
    sortByDate();
  }
  
  // Also I've introduced a &lt;tbody&gt; into your table so that I can just sort the data rows and completely ignore the header row.
  function sortByDate() {
    var tbody = document.querySelector("#cashflow tbody");
  
    var rows = [].slice.call(tbody.querySelectorAll("tr")); // get trs as array for ease of use
    console.log("rows b4 sort: ");
    console.log(rows); //'by MPG' added for debugging
    rows.sort(); //'by MPG' i think this line is where the problem is. ** * PROBLEM ** *
      console.log("rows after sort: ");
    console.log(rows); //'by MPG' added for debugging
    rows.forEach(function(v) {
      tbody.appendChild(v); // note that .appendChild() *moves* elements
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    table-layout: fixed;
    empty-cells: show;
    font-family: Verdana, sans-serif;
    font-size: .8em;
    width: 100%;
    &lt;!--874px;
    --&gt;table-layout: fixed;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    border: 1px solid black;
    border-collapse: collapse;
    padding: 5px;
  }
  
  th {
    padding: 3px;
    font-size: .84em;
  }
  
  td {
    padding: 3px;
    font-size: .9em;
  }
  
  tr:nth-child(odd) {
    background: #eee;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;button onclick="calcbal()"&gt;Sort 1st col&lt;/button&gt;
    &lt;table id=cashflow contenteditable&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th width="40px" contenteditable="false"&gt;Sortcell&lt;/th&gt;
          &lt;!--0--&gt;
          &lt;th width="115px" contenteditable="false"&gt;AccountName&lt;/th&gt;
          &lt;!--1--&gt;
          &lt;th width="40px" contenteditable="false"&gt;PayDate&lt;/th&gt;
          &lt;!--2--&gt;
          &lt;th width="40px" contenteditable="false"&gt;DueDate&lt;/th&gt;
          &lt;!--3--&gt;
          &lt;th width="32px" contenteditable="false"&gt;Cycle&lt;/th&gt;
          &lt;!--4--&gt;
          &lt;th width="34px" contenteditable="false"&gt;Method&lt;/td&gt;
            &lt;!--5--&gt;
            &lt;th width="41px" contenteditable="false"&gt;AutoPay&lt;/th&gt;
            &lt;!--6--&gt;
            &lt;th width="150px" contenteditable="false"&gt;Comment&lt;/th&gt;
            &lt;!--7--&gt;
            &lt;th width="45px" contenteditable="false"&gt;PymtDue&lt;/th&gt;
            &lt;!--8--&gt;
            &lt;th width="34px" contenteditable="false"&gt;Budget&lt;/th&gt;
            &lt;!--9--&gt;
            &lt;th width="66px" contenteditable="false"&gt;PymtSched&lt;/th&gt;
            &lt;!--10--&gt;
            &lt;th width="38px" contenteditable="false"&gt;Balance&lt;/th&gt;
            &lt;!--11--&gt;
            &lt;th width="200px" contenteditable="false"&gt;URL&lt;/th&gt;
            &lt;!--12--&gt;
            &lt;th width="39px" contenteditable="false"&gt;AcctBal&lt;/th&gt;
            &lt;!--13--&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;200101&lt;/td&gt;
          &lt;td&gt;Bank Account xxxx&lt;/td&gt;
          &lt;td&gt;01/01/20&lt;/td&gt;
          &lt;td&gt;01/01/20&lt;/td&gt;
          &lt;td&gt;None&lt;/td&gt;
          &lt;td&gt;None&lt;/td&gt;
          &lt;td&gt;None&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;https://www.&lt;/td&gt;
          &lt;td&gt;1000&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;210401&lt;/td&gt;
          &lt;td&gt;APLACE4SPACE&lt;/td&gt;
          &lt;td&gt;04/01/21&lt;/td&gt;
          &lt;td&gt;04/01/21&lt;/td&gt;
          &lt;td&gt;Monthly&lt;/td&gt;
          &lt;td&gt;Online&lt;/td&gt;
          &lt;td&gt;None&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;79&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;79&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;https://www.aplace4space.com/&lt;/td&gt;
          &lt;td&gt;0&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;210331&lt;/td&gt;
          &lt;td&gt;RENT TO DOUG&lt;/td&gt;
          &lt;td&gt;03/31/21&lt;/td&gt;
          &lt;td&gt;03/31/21&lt;/td&gt;
          &lt;td&gt;None&lt;/td&gt;
          &lt;td&gt;None&lt;/td&gt;
          &lt;td&gt;None&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;https://www.&lt;/td&gt;
          &lt;td&gt;0&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>