Table Fixed Header - Sortable

HTML

<div>Table Sorter</div>
<table id="tbl" border="1">
  <thead>
    <tr>

      <th>SrNo</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>test 1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>test 2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>test 3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>test 1</td>
    </tr>
    <tr>
      <td>5</td>
      <td>test 1</td>
    </tr>
    <tr>
      <td>6</td>
      <td>test 1</td>
    </tr>
    <tr>
      <td>8</td>
      <td>test 1</td>
    </tr>
    <tr>
      <td>9</td>
      <td>test 1</td>
    </tr>
    <tr>
      <td>10</td>
      <td>test 1</td>
    </tr>

  </tbody>
</table>

CSS

.scrollbar-measure {
  width: 100px;
  height: 100px;
  overflow: scroll;
  position: absolute;
  top: -9999px;
}

th.sortable {
  color: #666;
  cursor: pointer;
  text-decoration: underline;
}

th.sortable:hover {
  color: black;
}

th.sorted-asc,
th.sorted-desc {
  color: black;
}

.sorted {
  background-color: #77c7de;
}

JavaScript

var QF = {
  elems: [],
  //Array to save all the elements found by the functions getById, getByC
  //Get all elements by Id
  //It could take more than one parameter
  getById: function() {
    var tempElems = []; //temp Array to save the elements found
    for (var i = 0; i < arguments.length; i++) {
      if (typeof arguments[i] === 'string') { //Verify if the parameter is an string
        tempElems.push(document.getElementById(arguments[i])); //Add the element to tempElems
      }
    }
    this.elems = tempElems; //All the elements are copied to the property named elems
    return this; //Return this in order to chain
  },


  //Add a new class to the elements
  //This does not delete the all class, it just add a new one
  addClass: function(name) {
    for (var i = 0; i < this.elems.length; i++) {
      this.elems[i].className += ' ' + name; //Here is where we add the new class
    }
    return this; //Return this in order to chain
  },


  //Add an Event to the elements found by the methods: getById and getByClass
  //--Action is the event type like 'click','mouseover','mouseout',etc
  //--Callback is the function to run when the event is triggered
  on: function(action, callback) {
    if (this.elems[0].addEventListener) {
      for (var i = 0; i < this.elems.length; i++) {
        this.elems[i].addEventListener(action, callback, false); //Adding the event by the W3C for Firefox, Safari, Opera...   
      }
    } else if (this.elems[0].attachEvent) {
      for (var i = 0; i < this.elems.length; i++) {
        this.elems[i].attachEvent('on' + action, callback); //Adding the event to Internet Explorer :(
      }
    }
    return this; //Return this in order to chain
  },

  //Append Text into the elements
  //Text is the string to insert
  appendText: function(text) {
    text = document.createTextNode(text); //Create a new Text Node with the string supplied
    for (var i = 0; i < this.elems.length; i++) {
      this.elems[i].appendChild(text); //Append...