Sort a column of a table in alphabetical order

Question

I have the following table and the respective code and I intend to sort the table alphabetically in order to get " AC / BD / IC " instead of what is.

//javascript para adicionar elementos 

     function adicionar() {
            var disciplina = localStorage.setItem("Disciplina",document.getElementById("nomedisciplina").value);
            var nome = localStorage.getItem("Disciplina");
            var table = document.getElementById("myTable2");
            var row = table.insertRow(1);
            var cell1 = row.insertCell(0);
                cell1.innerHTML = nome;       
}

    // HTML ,  tabela e, botão e input
    <table id="myTable2">
      <thead>
        <tr>
            <th>Disciplina</th>
        </tr>
      </thead>
      <tbody>
        <tr>
        </tr>
      </tbody>
    </table>

Adicionar nome da disciplina: <input type="text" name="nome" id="nomedisciplina"  onkeypress="return onlyAlphabets(event,this);" >    
<button id ="adicionardisc" onclick="adicionar()">Adicionar disciplina</button><br>

Answer 1

This example is working, but I had to make some changes to your code, come on:

1 - Delete the tr emptiness within your tbody

2 - Change your variable table:

var table = document.querySelector("#myTable2 tbody");

3 - Change variable value row:

var row = table.insertRow(0);

4 - Add the function ordernar() to your javascript:

function ordenar() {
    var values = [].slice.call(document.querySelectorAll('#myTable2 tbody tr')).map(function(el) {
        return '<tr>' + el.innerHTML + '</tr>';  
    });
    values = values.sort();
    document.querySelector('#myTable2 tbody').innerHTML = values.join('');
}

//javascript para adicionar elementos 

function adicionar() {
  var nome = document.getElementById("nomedisciplina").value;
  var body = document.querySelector("#myTable2 tbody");
  var row = body.insertRow(0);
  var cell1 = row.insertCell(0);
  cell1.innerHTML = nome;       
}

function ordenar() {
  var values = [].slice.call(document.querySelectorAll('#myTable2 tbody tr')).map(function(el) {
    return '<tr>' + el.innerHTML + '</tr>';  
  });
  values = values.sort();
  document.querySelector('#myTable2 tbody').innerHTML = values.join('');
}

<table id="myTable2">
      <thead>
        <tr>
            <th>Disciplina</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>

Adicionar nome da disciplina: <input type="text" name="nome" id="nomedisciplina" >    
<button id ="adicionardisc" onclick="adicionar()">Adicionar disciplina</button><br>

<button onclick="ordenar()">ORDENAR</button>

In the order function I get all the tr of tbody and put in an array, then use the function sort() to sort the array, then join the array with the join()(string), and replace the contents of the tag tbody.