Sort HTML tables

Question

Sort HTML tables

Navigation

#1 by (1 votes)

1

I have 2 tables that have been initialized in HTML but which are joining rows and columns through 2 Javascript functions.

HTML Table 1:

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

HTML Table 2:

<table id="myTable2">
  <thead>
      <tr>
    <th>Disciplina</th>
    <th>Método de avaliação</th>
    <th>Data da avaliação</th>
    <th>Antecedência</th>
    <th>Duração por dia</th>
      </tr>
  </thead>
    <tbody>
    </tbody>
</table>

Javascript:

     //Tabela 1 
    ...
    var array = localStorage.getItem("ListaDisciplinas").split(','); // lista de disciplinas
    for(i=0;i<array.length;i++){
        var a = document.getElementById( "mySelect" + i);
        var valor1 = a.options[a.selectedIndex].text;
        localStorage.setItem("Prioridade" + array[i],valor1);
        localStorage.setItem("Disciplinas" + i,array[i]);
        var table = document.getElementById("myTable");
        var row = table.insertRow(1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        cell1.innerHTML = localStorage.getItem("Disciplinas" + i);
        cell2.innerHTML = localStorage.getItem("Prioridade" + array [i]);
}
    ...


        // tabela 2
      ...
        var table = document.getElementById("myTable2");
                var row = table.insertRow(1);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);
                var cell4 = row.insertCell(3);
                var cell5 = row.insertCell(4);
                cell1.innerHTML = localStorage.getItem("disciplinas");
                cell2.innerHTML = localStorage.getItem("metododeavaliaçao");
                cell3.innerHTML = localStorage.getItem("Data");
                cell4.innerHTML = localStorage.getItem("DiasAtecedencia");
                cell5.innerHTML = localStorage.getItem("duraçaopordia");
                  ...

What I want is to sort, with Javascript or Jquery, Table 1 alphabetically by the name of the disciplines, first column and sort Table 2 by date, third column

javascript html jquery table

asked by anonymous 26.11.2016 / 14:41

1 answer

Hide only child rows Uploading images only after clicking button

score 1 · Accepted Answer

You can use the sort method of array :

Sort :

The method sort() organizes the items of a array .

Order by subject name:

array.sort(function(a, b){
  if(a.disciplinas < b.disciplinas) {
    return -1;
  }

  if(a.disciplinas > b.disciplinas) {
    return 1;
  }

  return 0;
})

Sort by date of courses:

array.sort(function(a,b){
  return new Date(b.Data) - new Date(a.Data);
});