Eu gostaria de saber como eu poderia ordenar a tabela, de forma de que o click captura posso ser usado para saber por qual coluna quero ordenar? poderia exemplificar essa situação?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Eu gostaria de saber como eu poderia ordenar a tabela, de forma de que o click captura posso ser usado para saber por qual coluna quero ordenar? poderia exemplificar essa situação?
Fala Felipe, tudo bem ?
Você poderia pensar em algo assim ... ter suas colunas de título com alguma forma de identificação, bem como o corpo de uma tabela. Exemplo:
<table>
<thead>
<tr>
<th class="titleColumn">Id</th>
<th class="titleColumn">Nome</th>
</tr>
</thead>
<tbody class="tableBody">
<tr>
<td>1</td>
<td>Felipe</td>
</tr>
<tr>
<td>2</td>
<td>Rafael</td>
</tr>
</tbody>
</table>A partir daí adicionar o evento de click em cada um dos títulos de coluna. Exemplo de evento de clique que mostra no console o conteudo textual de cada elemento de th:
<script>
var columns = document.querySelectorAll('.titleColumn');
columns.forEach(c => c.addEventListener("click", (event) => {
console.log(event.target.textContent)
}))
</script>A partir daí ao invés de imprimir a informação das ths no console, você poderia chamar uma função que ordena passando o título da coluna selecionada.
<script>
// ordena dado um criterio
var sortBy = (criteria) => {
// aqui você seleciona as trs do tableBody
// var trs = document.querySelectorAll('.tableBody tr');
// e pode applicar qualquer algoritmo de ordenação no array de trs retornado, inclusive o proprio .sort() do Array JavaScript
// Dê uma olhada aqui https://www.w3schools.com/js/js_array_sort.asp
// apos ter o array ordenado você pode selecionar novamente o tableBody e adicionar as trs em ordem na propriedade .innerHTML do tbody
// algo como tbody.innerHTML = seu conteúdo html (trs ordenadas)
}
var columns = document.querySelectorAll('.titleColumn');
columns.forEach(c => c.addEventListener("click", (event) => {
var columnTitle = event.target.textContent;
sortBy(columnTitle);
}))
</script>Dê uma pesquisada em ordenação. Isso se você quiser escrever totalmente essa lógica. Na prática em projetos utilizaríamos alguma lib JavaScript que já trouxesse o componente pronto, como por exemplo a lib: http://tablesorter.com/docs/
Espero ter ajudado no pensamento.
Abraço!