Esse exemplo está funcionando, mas tive que fazer algumas alterações no seu código, vamos lá:
1 - Apague o tr
vazio dentro do seu tbody
2 - Mude sua variável table
:
var table = document.querySelector("#myTable2 tbody");
3 - Mude o valor da variável row
:
var row = table.insertRow(10);
4 - Adicione a função ordernar()
ao seu 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>
Na função ordenar eu pego todos os tr
do tbody
e coloco em um array, depois uso a função sort()
para ordenar o array, depois junto o array com o join()
(transforma em string), e substituo o conteúdo da tag tbody
.