title: JavaScript array sort(function) to sort table rows- not sorting
body: <p>I am trying to sort a dynamically constructed table on the client side. So far I have done my research to discover JavaScript's sort() method will take a callback. Here is what I have so far:</p>
  
  <pre><code>function retrvCatalog(e){
  var merch = document.getElementById('merch');
  var tRows = merch.rows;
  var tBody = merch.tBodies;
  var rowArr = [];
  for (x in tRows){
      rowArr[x] = tRows[x];
  }
  rowArr.sort(function(a, b){
      if (a.cells.textContent &lt; b.cells.textContent){
          return -1;
      }
      if(a.cells.textContent &gt; b.cells.textContent){
          return 1;
      }
      return 0;
  });
  }
  </code></pre>
  
  <p>Stepping through it in Firebug, it appears to not change the order of the rows. Can someone please help me figure out what I am missing?</p>
  
  <p><strong>FINAL ALGORITHM</strong></p>
  
  <pre><code>function retrvCatalog(e){
  var fltr = e.id;
  var merch = document.getElementById('merch');
  var tblHead = merch.tHead;
  merch.deleteTHead();
  var tRows = merch.rows;
  var rowArr = [];
  for (var i=0; i&lt;tRows.length; i++){
      rowArr[i] = tRows[i];
  }
  rowArr = rowArr.sort(function(a, b){
      if (fltr &gt; 3){
          a = parseFloat(a.cells[fltr].innerHTML);
          b = parseFloat(b.cells[fltr].innerHTML);
      }
      else{
          a = a.cells[fltr].innerHTML;
          b = b.cells[fltr].innerHTML;
      }
      if (a&gt;b){
          return 1;
      }
      if(a&lt;b){
          return -1;
      }
      return 0;
  });
  while(merch.hasChildNodes()) {
      merch.removeChild(merch.firstChild);
  }
  merch.appendChild(tblHead);
  for (i=0;i&lt;rowArr.length;i++){
      merch.appendChild(rowArr[i]);
  }
  }
  </code></pre>
  
  <p>The final two columns in the row are numbers, so that is why the method to sort is slightly variable.</p>