title: Sort table both numerically and alphabetically using Javascript
body: <p>I have a table which works by clicking on a header, which then sorts the column in ascending and descending order every time you click on the header. It sorts everything in alphabetical order, but I need it to also be able to sort numerically.</p>
  
  <p>It seems to work until the numbers go beyond single digits within the same column.</p>
  
  <p>This is the HTML code: (Ignore the NFL content, it's just data to test out this table)</p>
  
  <pre><code>&lt;div id="supAll"&gt;
              &lt;table border="1" class="supTable"&gt;
                  &lt;tr&gt; 
                      &lt;th onclick="sortTable('supTable', 0)"&gt;Team&lt;/th&gt;
                      &lt;th onclick="sortTable('supTable', 1)"&gt;SB Wins&lt;/th&gt;
                      &lt;th onclick="sortTable('supTable', 2)"&gt;SB Losses&lt;/th&gt;
                      &lt;th onclick="sortTable('supTable', 3)"&gt;Last Won&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr class="nfc nfcWest"&gt;
                      &lt;td&gt;Arizona Cardinals&lt;/td&gt;
                      &lt;td&gt;0&lt;/td&gt;
                      &lt;td&gt;1&lt;/td&gt;
                      &lt;td&gt;-&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="nfc nfcSouth"&gt;
                      &lt;td&gt;Atlanta Falcons&lt;/td&gt;
                      &lt;td&gt;10&lt;/td&gt;
                      &lt;td&gt;2&lt;/td&gt;
                      &lt;td&gt;-&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="afc afcNorth"&gt;
                      &lt;td&gt;Baltimore Ravens&lt;/td&gt;
                      &lt;td&gt;2&lt;/td&gt;
                      &lt;td&gt;0&lt;/td&gt;
                      &lt;td&gt;2012&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="afc afcEast"&gt;
                      &lt;td&gt;Buffalo Bills&lt;/td&gt;
                      &lt;td&gt;11&lt;/td&gt;
                      &lt;td&gt;4&lt;/td&gt;
                      &lt;td&gt;-&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="nfc nfcSouth"&gt;
                      &lt;td&gt;Carolina Panthers&lt;/td&gt;
                      &lt;td&gt;22&lt;/td&gt;
                      &lt;td&gt;2&lt;/td&gt;
                      &lt;td&gt;-&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="nfc nfcNorth"&gt;
                      &lt;td&gt;Chicago Bears&lt;/td&gt;
                      &lt;td&gt;1&lt;/td&gt;
                      &lt;td&gt;1&lt;/td&gt;
                      &lt;td&gt;1985&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="afc afcNorth"&gt;
                      &lt;td&gt;Cincinnati Bengals&lt;/td&gt;
                      &lt;td&gt;0&lt;/td&gt;
                      &lt;td&gt;2&lt;/td&gt;
                      &lt;td&gt;-&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="afc afcNorth"&gt;
                      &lt;td&gt;Cleveland Browns&lt;/td&gt;
                      &lt;td&gt;0&lt;/td&gt;
                      &lt;td&gt;0&lt;/td&gt;
                      &lt;td&gt;-&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="nfc nfcEast"&gt;
                      &lt;td&gt;Dallas Cowboys&lt;/td&gt;
                      &lt;td&gt;5&lt;/td&gt;
                      &lt;td&gt;3&lt;/td&gt;
                      &lt;td&gt;1995&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="afc afcWest"&gt;
                      &lt;td&gt;Denver Broncos&lt;/td&gt;
                      &lt;td&gt;3&lt;/td&gt;
                      &lt;td&gt;5&lt;/td&gt;
                      &lt;td&gt;2015&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="nfc nfcNorth"&gt;
                      &lt;td&gt;Detroit Lions&lt;/td&gt;
                      &lt;td&gt;0&lt;/td&gt;
                      &lt;td&gt;0&lt;/td&gt;
                      &lt;td&gt;-&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="nfc nfcNorth"&gt;
                      &lt;td&gt;Green Bay Packers*&lt;/td&gt;
                      &lt;td&gt;4&lt;/td&gt;
                      &lt;td&gt;1&lt;/td&gt;
                      &lt;td&gt;2010&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="afc afcSouth"&gt;
                      &lt;td&gt;Houston Texans&lt;/td&gt;
                      &lt;td&gt;0&lt;/td&gt;
                      &lt;td&gt;0&lt;/td&gt;
                      &lt;td&gt;-&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="afc afcSouth"&gt;
                      &lt;td&gt;Indianapolis Colts&lt;/td&gt;
                      &lt;td&gt;2&lt;/td&gt;
                      &lt;td&gt;2&lt;/td&gt;
                      &lt;td&gt;2006&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="afc afcSouth"&gt;
                      &lt;td&gt;Jacksonville Jaguars&lt;/td&gt;
                      &lt;td&gt;0&lt;/td&gt;
                      &lt;td&gt;0&lt;/td&gt;
                      &lt;td&gt;-&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="afc afcWest"&gt;
                      &lt;td&gt;Kansas Chiefs*&lt;/td&gt;
                      &lt;td&gt;1&lt;/td&gt;
                      &lt;td&gt;1&lt;/td&gt;
                      &lt;td&gt;1969&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="afc afcWest"&gt;
                      &lt;td&gt;Los Angeles Chargers&lt;/td&gt;
                      &lt;td&gt;0&lt;/td&gt;
                      &lt;td&gt;1&lt;/td&gt;
                      &lt;td&gt;-&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="nfc nfcWest"&gt;
                      &lt;td&gt;Los Angeles Rams&lt;/td&gt;
                      &lt;td&gt;1&lt;/td&gt;
                      &lt;td&gt;2&lt;/td&gt;
                      &lt;td&gt;1999&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="afc afcEast"&gt;
                      &lt;td&gt;Miami Dolphins&lt;/td&gt;
                      &lt;td&gt;2&lt;/td&gt;
                      &lt;td&gt;3&lt;/td&gt;
                      &lt;td&gt;1973&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="nfc nfcNorth"&gt;
                      &lt;td&gt;Minnesota Vikings&lt;/td&gt;
                      &lt;td&gt;0&lt;/td&gt;
                      &lt;td&gt;4&lt;/td&gt;
                      &lt;td&gt;-&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="afc afcEast"&gt;
                      &lt;td&gt;New England Patriots&lt;/td&gt;
                      &lt;td&gt;5&lt;/td&gt;
                      &lt;td&gt;4&lt;/td&gt;
                      &lt;td&gt;2016&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="nfc nfcSouth"&gt;
                      &lt;td&gt;New Orleans Saints&lt;/td&gt;
                      &lt;td&gt;1&lt;/td&gt;
                      &lt;td&gt;1&lt;/td&gt;
                      &lt;td&gt;2009&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="nfc nfcEast"&gt;
                      &lt;td&gt;New York Giants&lt;/td&gt;
                      &lt;td&gt;4&lt;/td&gt;
                      &lt;td&gt;1&lt;/td&gt;
                      &lt;td&gt;2011&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="afc afcEast"&gt;
                      &lt;td&gt;New York Jets*&lt;/td&gt;
                      &lt;td&gt;1&lt;/td&gt;
                      &lt;td&gt;0&lt;/td&gt;
                      &lt;td&gt;1968&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="afc afcWest"&gt;
                      &lt;td&gt;Oakland Raiders&lt;/td&gt;
                      &lt;td&gt;3&lt;/td&gt;
                      &lt;td&gt;2&lt;/td&gt;
                      &lt;td&gt;1983&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="nfc nfcEast"&gt;
                      &lt;td&gt;Philadelphia Eagles&lt;/td&gt;
                      &lt;td&gt;0&lt;/td&gt;
                      &lt;td&gt;2&lt;/td&gt;
                      &lt;td&gt;-&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="afc afcNorth"&gt;
                      &lt;td&gt;Pittsburgh Steelers&lt;/td&gt;
                      &lt;td&gt;6&lt;/td&gt;
                      &lt;td&gt;2&lt;/td&gt;
                      &lt;td&gt;2008&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="nfc nfcWest"&gt;
                      &lt;td&gt;San Francisco 49ers&lt;/td&gt;
                      &lt;td&gt;5&lt;/td&gt;
                      &lt;td&gt;5&lt;/td&gt;
                      &lt;td&gt;1994&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="nfc nfcWest"&gt;
                      &lt;td&gt;Seattle Seahawks&lt;/td&gt;
                      &lt;td&gt;1&lt;/td&gt;
                      &lt;td&gt;2&lt;/td&gt;
                      &lt;td&gt;2013&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="nfc nfcSouth"&gt;
                      &lt;td&gt;Tampa Bay Buccaneers&lt;/td&gt;
                      &lt;td&gt;1&lt;/td&gt;
                      &lt;td&gt;0&lt;/td&gt;
                      &lt;td&gt;2002&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="afc afcSouth"&gt;
                      &lt;td&gt;Tennessee Titans&lt;/td&gt;
                      &lt;td&gt;0&lt;/td&gt;
                      &lt;td&gt;1&lt;/td&gt;
                      &lt;td&gt;-&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="nfc nfcEast"&gt;
                      &lt;td&gt;Washington Redskins&lt;/td&gt;
                      &lt;td&gt;3&lt;/td&gt;
                      &lt;td&gt;2&lt;/td&gt;
                      &lt;td&gt;1991&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;      
      &lt;/div&gt;
  </code></pre>
  
  <p>And below here is the Javascript code:</p>
  
  <pre><code>function sortTable(tableClass, n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  
  table = document.getElementsByClassName(tableClass)[0];
  switching = true;
  dir = "asc";
  while (switching) {
      switching = false;
      rows = table.getElementsByTagName("TR");
      for (i = 1; i &lt; (rows.length - 1); i++) {
          shouldSwitch = false;
          x = rows[i].getElementsByTagName("TD")[n];
          y = rows[i + 1].getElementsByTagName("TD")[n];
          if (dir == "asc") {
              if (x.innerHTML.toLowerCase() &gt; y.innerHTML.toLowerCase()) {
                  shouldSwitch= true;
                  break;
              }
          } else if (dir == "desc") {
              if (x.innerHTML.toLowerCase() &lt; y.innerHTML.toLowerCase()) {
                  shouldSwitch= true;
                  break;
              }
          }
      }
      if (shouldSwitch) {
          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
          switching = true;
          switchcount ++;      
      } else {
          if (switchcount == 0 &amp;&amp; dir == "asc") {
              dir = "desc";
              switching = true;
          }
      }
  }
  </code></pre>
  
  <p>}</p>
  
  <p>If you run the code you can see in the middle column, where there are different sized numbers, it doesn't sort them properly anymore. </p>
  
  <p>Is there any way to use this code/function so that my tables work for sorting both alphabetically and numerically (when it goes above single digits)? And if not can someone please help me solve this problem. </p>
  
  <p>EDIT - This has been solved! If you check out both the code below by Hendeca, and Teldri you will see the solved code. Both of their versions work.</p>