Skip to main content
conteúdo editado
Fonte Link
JuniorNunes
  • 5mil
  • 1
  • 13
  • 26

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.

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

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.

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.

adicionou 1 caractere ao conteúdo
Fonte Link
JuniorNunes
  • 5mil
  • 1
  • 13
  • 26

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 = bodytable.insertRow(1);

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(10);
  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.

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 = body.insertRow(1);

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(1);
  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.

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

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.

Fonte Link
JuniorNunes
  • 5mil
  • 1
  • 13
  • 26

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 = body.insertRow(1);

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(1);
  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.