0

Tenho a seguinte tabela e o respectivo código e pretendo ordenar a tabela por ordem alfabética de modo a obter " AC / BD / IC " em vez do que está.

inserir a descrição da imagem aqui

//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>
1
  • 1
    E qual a sua dúvida? Já tentou algum código de ordenação? Commented 7/12/2016 às 12:26

1 Resposta 1

1

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(0);

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.

2
  • " Uncaught IndexSizeError: Failed to execute 'insertRow' on 'HTMLTableSectionElement': The provided index (1 is outside the range [-1, 0]. " Dá este erro Commented 7/12/2016 às 13:55
  • Desculpe o certo é: var row = table.insertRow(0);. Vou corrigir. Commented 7/12/2016 às 14:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .