How to sort table data in HTML using JavaScript

This tutorial will explore the process of organizing data within an HTML table by leveraging JavaScript. Sorting table data can be achieved in two ways: ascending or descending order. Initially, we will grasp the fundamental concept of JavaScript and the <table> tag. Subsequently, we will delve into sorting table data through a variety of illustrative instances.

What do you mean by JavaScript?

JavaScript, being a high-level language, is object-based and has the capability to interact with different HTML elements present on a webpage.

What do you mean by <table> element?

In HTML, tables are created by the <table> element. In the <table> element, rows are inserted using the <tr> tag and <td> tag is used to specify the contents of the cell. The tag should be specified in pairs for each cell of the row.

Let's explore some instances of sorting table data with JavaScript.

Example 1:

Example


<! DOCTYPE html>  
 <html>  
      <head>  
	  <meta name="viewport" content="width=device-width, initial-scale=1">
           <title> Sort table data in HTML using JavaScript </title>  
      </head>  
	  <style>
body {
  background: -webkit-gradient(linear, left top, left bottom, from(lightgrey), to(transparent)), -webkit-gradient(linear, left top, right top, from(skyblue), to(transparent)), -webkit-gradient(linear, right top, left top, from(coral), to(transparent));
  background: -webkit-linear-gradient(lightgrey, transparent), -webkit-linear-gradient(left, skyblue, transparent), -webkit-linear-gradient(right, coral, transparent);
  background: -o-linear-gradient(lightgrey, transparent), -o-linear-gradient(left, skyblue, transparent), -o-linear-gradient(right, coral, transparent);
  background: linear-gradient(lightgrey, transparent), linear-gradient(90deg, skyblue, transparent), linear-gradient(-90deg, coral, transparent);
  background-blend-mode: screen;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  margin-top: 25px;
  margin-left: 25px;
  margin-bottom: 50px;
  min-width: 768px;
  padding-bottom: 20px;
  padding-top: 10px;
  display: inline-block;
  text-align: center;
}
h1 {
 font-size: 32px; 
margin-bottom: 50px;
}
h1.sixth {
 position: relative;
 }
h1.sixth:before {
content: '[';
	display: inline-block;
	position: relative;
	top: 1px;
	font-size: 1.25em;
	color: tomato;
	transition: all 0.5s ease;
}
h1.sixth:after {
	content: '[';
	display: inline-block;
	position: relative;
	top: 1px;
	font-size: 1.25em;
	color: tomato;
	transition: all 0.5s ease;
}
h1.sixth:after { content: ']';  }
h1.sixth:hover:before { 
	transform: translateX(-5px);
}
h1.sixth:hover:after { 
	transform: translateX(5px);
}
h3.second {
	font-weight: 800;
	font-size:30px;
}
* {
    color: #7F7F7F;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
}
h3.second span {
	position: relative;
	display: inline-block;
	padding: 5px 10px ;
	border-radius: 10px;
	border-bottom: 2px solid mediumseagreen;
}
h3.second span:after {
	content: '';
	position: absolute;
	bottom: calc(-100% - 1px);
	margin-left: -10px;
	display: block;
	width: 100%; height: 100%;
	border-radius: 10px;
	border-top: 1px solid mediumseagreen;
	font-weight: bold;
}
#ceo {
border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}
#ceo th {
  padding: 10px 30px;
  text-align: left;
}
#ceo td {
  padding: 10px 30px;
   font-size:20px;
}
#ceo th {
  background: #333;
  color: white;
  font-size:30px;
}
#ceo th.asc:after {
  display: inline;
  content: '?';
}
#ceo th.desc:after {
  display: inline;
  content: '?';
}
#ceo td {
  background: #ccc;
}
  </style>
     <body>  
	<h1 align="center" class="sixth"> Example </h3> 		   
           <h3 align="center" class="second"> <span> Sort table data in HTML using JavaScript </span> </h3>
             <table id="ceo" align="center">
    <thead>
        <tr>
            <th title="Name"> Name </th>
            <th title="Gender"> Gender </th>
            <th title="Age"> Age </th>
        </tr>
    </thead>
    <tbody>
<tr>
            <td> James V. Foreman  </td>
            <td> Male </td>
            <td> 30 </td>
        </tr>
        <tr>
            <td> Marissa Mayer </td>
            <td> Female </td>
            <td> 39 </td>
        </tr>
        <tr>
            <td> Larry Page </td>
            <td> Male </td>
            <td> 41 </td>
        </tr>
        <tr>
            <td> Mark Zuckerberg </td>
            <td> Male </td>
            <td> 30 </td>
        </tr>
	<tr>
            <td> Cameron K. Barnett </td>
            <td> Male </td>
            <td> 30 </td>
        </tr>
	<tr>
            <td> Berglunds snabbkop </td>
            <td> Male </td>
            <td> 30 </td>
        </tr>
	<tr>
            <td> Mortgage loan officer </td>
            <td> Male </td>
            <td> 30 </td>
        </tr>
     <tr>
            <td> Berglunds snabbkop </td>
            <td> Male </td>
            <td> 30 </td>
        </tr>
    </tbody>
</table>                
      </body>  
 </html>  
 <script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"> </script>  
 <script>  
           $(function () {
  $('table')
    .on('click', 'th', function () {
      var index = $(this).index(),
          rows = [],
          thClass = $(this).hasClass('asc') ? 'desc' : 'asc';
      $('#ceo th').removeClass('asc desc');
      $(this).addClass(thClass);
      $('#ceo tbody tr').each(function (index, row) {
        rows.push($(row).detach());
      });
      rows.sort(function (a, b) {
        var aValue = $(a).find('td').eq(index).text(),
            bValue = $(b).find('td').eq(index).text();
        return aValue > bValue
             ? 1
             : aValue < bValue
             ? -1
             : 0;
      });
      if ($(this).hasClass('desc')) {
        rows.reverse();
      }
      $.each(rows, function (index, row) {
        $('#ceo tbody').append(row);
      });
    });
});
 </script>

Explanation:

In the example provided, we demonstrated the creation of a sortable table using JavaScript. The table data can be sorted in either ascending or descending order.

Output:

Below is the output of this example:

Example 2: