How to sort table data in HTML using JavaScript?

In this article, we will learn how to sort table data in HTML using JavaScript. We can sort table data either in ascending order or descending order. In the beginning, we will understand the basic meaning of JavaScript and the <table> element. After that, we will learn to sort table data with the help of various examples.

What do you mean by JavaScript?

JavaScript is an object-based, high-level language as it can access various HTML objects on the web page.

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 take some examples of how to sort Table Data Using JavaScript.

Example 1:

  <! 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://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js”> </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 above example, we have created sort table data with the help of JavaScript. You can sort table data either in ascending order or descending order.