<table id="table">
  <thead>
    <th>Column1</th>
    <th>Product1</th>
    <th>Product2</th>
    <th id="sort">Price</th>
    <th>Count</th>
  </thead>
  <tbody>
    <tr>
      <td>Hello</td>
      <td>Word</td>
      <td>Avous</td>
      <td>3000</td>
      <td>200</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>Word</td>
      <td>Avous</td>
      <td>65</td>
      <td>54</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>Word</td>
      <td>Avous</td>
      <td>1500</td>
      <td>2</td>
    </tr>
    
  </tbody>
</table>
var table = document.getElementById('table');
var tbody = table.tBodies[0];
var rows = tbody.getElementsByTagName('tr');
rows = [].slice.call(rows);

document.querySelector('#sort').addEventListener('click', (e) => {
  rows.sort(function(row1, row2) {
  var cell1 = row1.getElementsByTagName('td')[3];
  var cell2 = row2.getElementsByTagName('td')[3];
  
  var val1 = ~~cell1.textContent || cell1.innerText
  var val2 = ~~cell2.textContent || cell2.innerText;
  
  if (val1 < val2) return -1;
  else if (val1 > val2) return 1;
  else return 0;
})

  for (var i = 0 ; i < rows.length; i++) {
    tbody.appendChild(rows[i]);
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.