[javascript] Sorting table rows according to table header column using javascript or jquery

_x000D_
_x000D_
var TableIDvalue = "myTable";_x000D_
var TableLastSortedColumn = -1;_x000D_
_x000D_
function SortTable() {_x000D_
  var sortColumn = parseInt(arguments[0]);_x000D_
  var type = arguments.length > 1 ? arguments[1] : 'T';_x000D_
  var dateformat = arguments.length > 2 ? arguments[2] : '';_x000D_
  var table = document.getElementById(TableIDvalue);_x000D_
  var tbody = table.getElementsByTagName("tbody")[0];_x000D_
  var rows = tbody.getElementsByTagName("tr");_x000D_
_x000D_
  var arrayOfRows = new Array();_x000D_
_x000D_
  type = type.toUpperCase();_x000D_
_x000D_
  dateformat = dateformat.toLowerCase();_x000D_
_x000D_
  for (var i = 0, len = rows.length; i < len; i++) {_x000D_
    arrayOfRows[i] = new Object;_x000D_
    arrayOfRows[i].oldIndex = i;_x000D_
    var celltext = rows[i].getElementsByTagName("td")[sortColumn].innerHTML.replace(/<[^>]*>/g, "");_x000D_
    if (type == 'D') {_x000D_
      arrayOfRows[i].value = GetDateSortingKey(dateformat, celltext);_x000D_
    } else {_x000D_
      var re = type == "N" ? /[^\.\-\+\d]/g : /[^a-zA-Z0-9]/g;_x000D_
      arrayOfRows[i].value = celltext.replace(re, "").substr(0, 25).toLowerCase();_x000D_
    }_x000D_
  }_x000D_
_x000D_
  if (sortColumn == TableLastSortedColumn) {_x000D_
    arrayOfRows.reverse();_x000D_
  } else {_x000D_
    TableLastSortedColumn = sortColumn;_x000D_
    switch (type) {_x000D_
      case "N":_x000D_
        arrayOfRows.sort(CompareRowOfNumbers);_x000D_
        break;_x000D_
      case "D":_x000D_
        arrayOfRows.sort(CompareRowOfNumbers);_x000D_
        break;_x000D_
      default:_x000D_
        arrayOfRows.sort(CompareRowOfText);_x000D_
    }_x000D_
  }_x000D_
  var newTableBody = document.createElement("tbody");_x000D_
_x000D_
  for (var i = 0, len = arrayOfRows.length; i < len; i++) {_x000D_
    newTableBody.appendChild(rows[arrayOfRows[i].oldIndex].cloneNode(true));_x000D_
  }_x000D_
  table.replaceChild(newTableBody, tbody);_x000D_
}_x000D_
_x000D_
function CompareRowOfText(a, b) {_x000D_
  var aval = a.value;_x000D_
  var bval = b.value;_x000D_
  return (aval == bval ? 0 : (aval > bval ? 1 : -1));_x000D_
}_x000D_
_x000D_
function deleteRow(i) {_x000D_
  document.getElementById('myTable').deleteRow(i)_x000D_
}
_x000D_
<table id="myTable" border="1">_x000D_
  <thead>_x000D_
    <tr>_x000D_
      <th>_x000D_
        <input type="button" onclick="javascript: SortTable(0, 'T');" value="SORT" /></th>_x000D_
    </tr>_x000D_
  </thead>_x000D_
  <tbody>_x000D_
    <tr>_x000D_
      <td>Shaa</td>_x000D_
      <td>ABC</td>_x000D_
      <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>cnubha</td>_x000D_
      <td>XYZ</td>_x000D_
      <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>Fine</td>_x000D_
      <td>MNO</td>_x000D_
      <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>Amit</td>_x000D_
      <td>PQR</td>_x000D_
      <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>Sultan</td>_x000D_
      <td>FGH</td>_x000D_
      <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>Hello</td>_x000D_
      <td>UST</td>_x000D_
      <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>_x000D_
    </tr>_x000D_
_x000D_
  </tbody>_x000D_
</table>
_x000D_
_x000D_
_x000D_

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to html-table

Table column sizing DataTables: Cannot read property 'length' of undefined TypeError: a bytes-like object is required, not 'str' in python and CSV How to get the <td> in HTML tables to fit content, and let a specific <td> fill in the rest How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3? Sorting table rows according to table header column using javascript or jquery How to make background of table cell transparent How to auto adjust table td width from the content bootstrap responsive table content wrapping How to print table using Javascript?