JS realizes the sorting function of HTML table

In this paper, we share the JavaScript to achieve HTML table sorting function for your reference, the specific contents are as follows

HTML code:

<table cellpadding="0" id="table">
    <tr class="top">
      <td>click me</td>
      <td>click me</td>
      <td>click me</td>
      <td>click me</td>
    </tr>
    <tr>
      <td>
        <span id="bfn_la_bac.usa">15.43</span>
      </td>
      <td class="red">700</td>
      <td>1.220</td>
      <td class="red"> Ah </td>
    </tr>
    <tr>
      <td>
        <span id="bfn_la_c.usa">7.05</span>
      </td>
      <td class="red">4</td>
      <td>3,000</td>
      <td class="red"> Bing </td>
    </tr>
    <tr>
      <td>
        <span id="bfn_la_jpm.usa">30.62</span>
      </td>
      <td class="red">30</td>
      <td>2,558,800</td>
      <td class="red"> And </td>
    </tr>
    <tr>
      <td>
        <span id="bfn_la_axp.usa">22.30</span>
      </td>
      <td class="red">5</td>
      <td>6</td>
      <td class="red"> Blind </td>
    </tr>
    <tr>
      <td>
        <span id="bfn_la_mrk.usa">26.31</span>
      </td>
      <td class="red">0.6</td>
      <td>5</td>
      <td class="red">-</td>
    </tr>
    <tr>
      <td>
        <span id="bfn_la_pg.usa">63.16</span>
      </td>
      <td class="red">7</td>
      <td>4</td>
      <td class="red"> Sub </td>
    </tr>
  </table>

JavaScirpt code:

var tableSort = function(){ 
  this.initialize.apply(this,arguments); 
} 
tableSort.prototype = { 
  initialize : function(tableId,clickRow,startRow,endRow,classUp,classDown,selectClass){ 
    this.Table = document.getElementById(tableId); 
    this.rows = this.Table.rows;// All rows  
    this.Tags = this.rows[clickRow-1].cells;// Label td 
    this.up = classUp; 
    this.down = classDown; 
    this.startRow = startRow; 
    this.selectClass = selectClass; 
    this.endRow = (endRow == 999? this.rows.length : endRow); 
    this.T2Arr = this._td2Array();// All affected td Adj. 2 Dimensional array  
    this.setShow(); 
  }, 
  // Set label switching  
  setShow:function(){ 
    var defaultClass = this.Tags[0].className; 
    for(var Tag ,i=0;Tag = this.Tags[i];i++){ 
      Tag.index = i; 
      addEventListener(Tag ,'click', Bind(Tag,statu)); 
    } 
    var _this =this; 
    var turn = 0; 
    function statu(){ 
      for(var i=0;i<_this.Tags.length;i++){ 
        _this.Tags[i].className = defaultClass; 
      } 
      if(turn==0){ 
        addClass(this,_this.down) 
        _this.startArray(0,this.index); 
        turn=1; 
      }else{ 
        addClass(this,_this.up) 
        _this.startArray(1,this.index); 
        turn=0; 
      } 
    } 
  }, 
  // Set the selected column style  
  colClassSet:function(num,cla){ 
    // Gets the associated td 
    for(var i= (this.startRow-1);i<(this.endRow);i++){ 
      for(var n=0;n<this.rows[i].cells.length;n++){ 
        removeClass(this.rows[i].cells[n],cla); 
      } 
      addClass(this.rows[i].cells[num],cla); 
    } 
  }, 
  // Start sorting  num  Sort by Column  aord  Reverse or sequential  
  startArray:function(aord,num){ 
    var afterSort = this.sortMethod(this.T2Arr,aord,num);// Sorted 2 The dimension array is passed to the sorting method  
    this.array2Td(num,afterSort);// Output  
  }, 
  // Converts the affected rows and columns to 2 Dimensional array  
  _td2Array:function(){ 
    var arr=[]; 
      for(var i=(this.startRow-1),l=0;i<(this.endRow);i++,l++){ 
        arr[l]=[]; 
        for(var n=0;n<this.rows[i].cells.length;n++){ 
          arr[l].push(this.rows[i].cells[n].innerHTML); 
        } 
      } 
    return arr; 
  }, 
  // According to the sorted 2 Dimension array to output the corresponding rows and columns  innerHTML 
  array2Td:function(num,arr){ 
    this.colClassSet(num,this.selectClass); 
    for(var i= (this.startRow-1),l=0;i<(this.endRow);i++,l++){ 
      for(var n=0;n<this.Tags.length;n++){ 
        this.rows[i].cells[n].innerHTML = arr[l][n]; 
      } 
    } 
  }, 
  // Pass in 1 A 2 Dimensional array, according to 2 In the subitems of the dimension array w Item sorting, and then returning the sorted 2 Dimensional array  
  sortMethod:function(arr,aord,w){ 
    arr.sort(function(a,b){ 
      x = killHTML(a[w]); 
      y = killHTML(b[w]); 
      x = x.replace(/,/g,''); 
      y = y.replace(/,/g,''); 
      switch (isNaN(x)){ 
      case false: 
      return Number(x) - Number(y); 
      break; 
      case true: 
      return x.localeCompare(y); 
      break; 
      } 
    }); 
    arr = aord==0?arr:arr.reverse(); 
    return arr; 
  } 
} 
/*-----------------------------------*/ 
function addEventListener(o,type,fn){ 
  if(o.attachEvent){
    o.attachEvent('on'+type,fn);
  }else if(o.addEventListener){
    o.addEventListener(type,fn,false);
  }else{
    o['on'+type] = fn;
  } 
} 
function hasClass(element, className) { 
  var reg = new RegExp('(\s|^)'+className+'(\s|$)'); 
  return element.className.match(reg); 
} 
function addClass(element, className) { 
  if (!this.hasClass(element, className)) { 
    element.className += " "+className; 
  } 
} 
function removeClass(element, className) { 
  if (hasClass(element, className)) { 
    var reg = new RegExp('(\s|^)'+className+'(\s|$)'); 
    element.className = element.className.replace(reg,' '); 
  } 
} 
var Bind = function(object, fun) { 
  return function() { 
    return fun.apply(object, arguments); 
  } 
} 
// Remove all html Mark  
function killHTML(str){ 
  return str.replace(/<[^>]+>/g,""); 
} 
//------------------------------------------------ 
//tableid  Which line is the label line, which line starts to sort, and which line ends to sort (999 Indicates the last )  Ascending label style, descending label style   Select Column Style  
// Object of the label line class It should be 1 To  
var ex1 = new tableSort('table',1,2,999,'up','down','hov');