title: Adding a row and sorting table using JavaScript
body: <p>I am running into a very small issue which has taken more than two hours.</p>
  
  <p>What I want is to insert a row in an HTML table and then sort it in ascending order. I've looked at <a href="https://stackoverflow.com/q/22906760/1050256">this answer</a> and thought that I can get this simple task working, but in vein.</p>
  
  <p>Here is my little form and table:</p>
  
  <pre class="lang-html prettyprint-override"><code>Name: &lt;input type="text" name="name" id="name"&gt;&lt;br&gt;
  Status: &lt;input type="text" name="status" id="status"&gt;&gt;&lt;br&gt;
  &lt;button onclick="myFunction(document.getElementsByName('name')[0].value,document.getElementsByName('status')[0].value)"&gt;Click&lt;/button&gt;&lt;br&gt;&lt;br&gt;
  &lt;table id="myTable"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Status&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Doe, John&lt;/td&gt;
              &lt;td&gt;Approved&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;aaa, John&lt;/td&gt;
              &lt;td&gt;Approved&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>My inline JavaScript function looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>function myFunction(name, status) {
      var table = document.getElementById('myTable').getElementsByTagName('tbody')[0];
      var row = table.insertRow(0);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      cell1.innerHTML = name;
      cell2.innerHTML = status;
  
      // The following code should sort the table.
      var tbody = $('#mytable').find('tbody');
      tbody.find('tr').sort(function (a, b) {
          return $('td:first', a).text().localeCompare($('td:first', b).text());
      }).appendTo(tbody);
  }
  </code></pre>
  
  <p><em>Please note that adding a row to the table works fine, it just adds it to the top.</em></p>
  
  <p>There are <strong>no</strong> console errors. The code which (apparently) should sort the table does not do anything. I've the subset of my HTML <a href="http://jsfiddle.net/ju7dB/222/" rel="nofollow noreferrer">here on Fiddle</a>, and yes that works fine.</p>
  
  <hr>
  
  <p>I know about <a href="http://tablesorter.com/docs/" rel="nofollow noreferrer">jQuery tablesorter</a> plugin but do not need to use it.</p>