In the code below I can sort the table only in ascending order. When I click the table header a second time it does not switch the order to descending order.

Can anyone help me how sort the table column in both directions? Is there any alternative way available to sort the textbox value that is inside the table data?

$("#sortcol").click(function() {
  const table = document.getElementById('tab_logic');
  const headers = table.querySelectorAll('th');
  const tableBody = table.querySelector('tbody');
  const rows = tableBody.querySelectorAll('tr');
  const directions = Array.from(headers).map(function(header) {
    return '';
  });
  
  const transform = function(index, content) {
    const type = headers[index].getAttribute('data-type');
    switch (type) {
      case 'number':
        return parseFloat(content);
      case 'string':
      default:
        return content;
    }
  };
  
  const sortColumn = function(index) {
    const direction = directions[index] || 'asc';
    const multiplier = direction === 'asc' ? 1 : -1;
    const newRows = Array.from(rows);
    
    newRows.sort(function(rowA, rowB) {
      const cellA = rowA.getElementsByTagName("td")[index];
      const cellB = rowB.getElementsByTagName("td")[index];
      const cellC = $(cellA).find('input').val();
      const cellD = $(cellB).find('input').val();
      const a = transform(index, cellC);
      const b = transform(index, cellD);
      switch (true) {
        case a > b:
          return 1 * multiplier;
        case a < b:
          return -1 * multiplier;
        case a === b:
          return 0;
      }
    });
    
    [].forEach.call(rows, function(row) {
      tableBody.removeChild(row);
    });
    
    directions[index] = direction === 'asc' ? 'desc' : 'asc';
    
    newRows.forEach(function(newRow) {
      tableBody.appendChild(newRow);
    });
  };
  
  sortColumn(1);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tab_logic" style="width: 40%; border: 1px solid black;">
  <thead>
    <tr>
      <th data-type="number">check</th>
      <th id="sortcol">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" MySQL">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" Python">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" Javascript">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" Angular JS">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" Csharp">
      </td>
    </tr>
  </tbody>
</table>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

your code is perfectly fine only problem is when you are clicking on it direction variable is resetting and 'asc' value is not persisting into an array. please check the below code.

var rows;
var directions;
var headers;
var tableBody;
$(document).ready(function(){
 const table = document.getElementById('tab_logic');
  headers = table.querySelectorAll('th');
  tableBody = table.querySelector('tbody');
  rows = tableBody.querySelectorAll('tr');
  directions = Array.from(headers).map(function(header) {
    return '';
  });
})
const transform = function(index, content) {
    const type = headers[index].getAttribute('data-type');
    switch (type) {
      case 'number':
        return parseFloat(content);
      case 'string':
      default:
        return content;
    }
  };
  
  const sortColumn = function(index) {
    const direction = directions[index] || 'asc';
    const multiplier = direction === 'asc' ? 1 : -1;
    const newRows = Array.from(rows);
    
    newRows.sort(function(rowA, rowB) {
      const cellA = rowA.getElementsByTagName("td")[index];
      const cellB = rowB.getElementsByTagName("td")[index];
      const cellC = $(cellA).find('input').val();
      const cellD = $(cellB).find('input').val();
      const a = transform(index, cellC);
      const b = transform(index, cellD);
      switch (true) {
        case a > b:
          return 1 * multiplier;
        case a < b:
          return -1 * multiplier;
        case a === b:
          return 0;
      }
    });
    
    [].forEach.call(rows, function(row) {
      tableBody.removeChild(row);
    });
    
   
    
    newRows.forEach(function(newRow) {
      tableBody.appendChild(newRow);
    });
     directions[index] = direction === 'asc' ? 'desc' : 'asc';
  };
$("#sortcol").click(function() {  
  sortColumn(1);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tab_logic" style="width: 40%; border: 1px solid black;">
  <thead>
    <tr>
      <th data-type="number">check</th>
      <th id="sortcol">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" MySQL">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" Python">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" Javascript">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" Angular JS">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" Csharp">
      </td>
    </tr>
  </tbody>
</table>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>